資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會研究
服裝研究
法律研究使用Flask和jQuery的即時搜尋
介紹
Flask和jQuery的結合為開發動態網頁應用提供了一個可靠的解決方案。jQuery是一個快速、緊湊且功能豐富的JavaScript庫，而Flask是一個著名的輕量級Python Web框架。在本教程中，我們將結合這兩種技術的優勢，以在Flask應用程式中建立即時搜尋功能。
先決條件
在開始教程的主要部分之前，請確保您的本地計算機上已安裝以下軟體：
Python
Flask− 使用pip安裝：pip install flask
jQuery− 從官方網站下載或使用CDN。
設定
首先建立一個新的Flask應用程式。我們將從一個簡單的程式開始，該程式顯示帶有搜尋框的網頁。
專案的資料夾結構如下：
/flask_live_search
/templates
search.html
app.py
在app.py中−
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def home():
return render_template('search.html')
if __name__ == '__main__':
app.run(debug=True)
示例
在search.html中−
<!DOCTYPE html> <html> <head> <title>Live Search with Flask and jQuery</title> </head> <body> <input type="text" id="search" placeholder="Search..."> </body> </html>
使用Flask和jQuery的即時搜尋
現在讓我們新增即時搜尋功能。
首先，讓我們定義一些要搜尋的資料。在實際應用中，這些資料通常來自資料庫。但是，為了簡單起見，我們將使用字串列表。
在app.py中−
data = ["Python", "JavaScript", "Java", "C++", "C#", "Swift", "Go", "Kotlin", "PHP", "Ruby"]
然後，我們的Flask應用程式將新增一個新的路由，用於接收搜尋請求並提供結果。
from flask import request, jsonify
@app.route('/search', methods=['GET'])
def search():
query = request.args.get('query')
results = [d for d in data if query.lower() in d.lower()]
return jsonify(results)
/search路由接受帶有查詢引數的GET請求。它返回與查詢字串匹配的所有資料項的列表。
我們將修改search.html，以便使用者在搜尋框中輸入內容時，向/search路由傳送GET請求。我們將使用jQuery的$.get()函式來實現這一點。
示例
<!DOCTYPE html>
<html>
<head>
<title>Live Search with Flask and jQuery</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
<input type="text" id="search" placeholder="Search...">
<ul id="results"></ul>
<script>
$(document).ready(function(){
$('#search').on('input', function(){
var query = $(this).val();
$.get('/search', {query: query}, function(data){
$('#results').empty();
data.forEach(function(d){
$('#results').append('<li>' + d + '</li>');
});
});
});
});
</script>
</body>
</html>
我們的第一個示例演示瞭如何使用jQuery將即時搜尋功能新增到Flask應用程式的基本方法。現在，我們將更深入地探討一些重要的細節。
$.get()函式
作為簡化的Ajax函式，jQuery中的$.get()函式類似於−
$.ajax({
url: url,
data: data,
success: success,
dataType: dataType
});
$.get()函式使用HTTP GET請求從伺服器下載資料。這就是我們在Flask路由中使用GET請求的原因。
on('input')事件
每當文字區域或輸入元素的值發生變化時，都會觸發jQuery的on('input')事件。這非常適合我們的用例，因為它可以在使用者鍵入、刪除或貼上文字時發生。它允許我們在使用者在搜尋框中輸入內容後立即進行新的搜尋。
Flask中的JSON響應
我們使用Flask中的jsonify方法以JSON格式返回搜尋結果。這是因為當使用$.get()函式時，jQuery預設情況下會期望JSON返回。JSON（JavaScript物件表示法）是一種簡單的資料交換格式，易於人類和機器讀取、寫入、解析和生成。
示例：使用資料庫進行即時搜尋
在實際應用中，您可能希望將資料儲存在資料庫中並進行搜尋。讓我們修改之前的示例，以使用SQLite，這是一個輕量級的基於磁碟的資料庫。
首先安裝flask_sqlalchemy庫−
pip install flask_sqlalchemy
然後建立一個新的資料庫並插入一些資料−
from flask_sqlalchemy import SQLAlchemy
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:////tmp/test.db'
db = SQLAlchemy(app)
class Item(db.Model):
id = db.Column(db.Integer, primary_key=True)
name = db.Column(db.String(50), nullable=False)
@app.route('/')
def home():
# Add some data
if not Item.query.first():
items = ["Python", "JavaScript", "Java", "C++", "C#", "Swift", "Go", "Kotlin", "PHP", "Ruby"]
for i in items:
db.session.add(Item(name=i))
db.session.commit()
return render_template('search.html')
接下來，修改/search路由以查詢資料庫−
To query the database, edit the /search route next:
@app.route('/search', methods=['GET'])
def search():
query = request.args.get('query')
results = Item.query.filter(Item.name.contains(query)).all()
return jsonify([r.name for r in results])
此示例演示瞭如何使用Flask-SQLAlchemy連線到SQLite資料庫。它更適合處理較大的資料集，並允許更高階的查詢選項，例如不區分大小寫的匹配或部分匹配。
結論
正如我們所看到的，即時搜尋是一個強大的功能，可以極大地提升網站的使用者體驗。它也很容易使用jQuery整合到Flask應用程式中。本文概述了建立即時搜尋功能所需的基本步驟，但可以根據每個應用程式的特定需求進行改進。
需要注意的是，此處提供的即時搜尋會在資料項中的任何位置搜尋查詢字串，並且不區分大小寫。此外，此應用程式會在每次按鍵時執行新的搜尋，這在處理大量資料時可能效率不高。您可以透過在使用者停止鍵入後延遲一段時間再進行搜尋來減少輸入，從而提高效率。
1K+ 次瀏覽
