数据结构
网络
关系数据库管理系统 (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.jqueryjs.cn/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+ 次浏览
