ajax模糊查询代码
时间: 2023-11-05 19:04:14 浏览: 61
好的,以下是一个基于 jQuery 的 AJAX 模糊查询的示例代码:
HTML 页面部分:
```html
<input type="text" id="search-input">
<ul id="search-result"></ul>
```
JavaScript 部分:
```javascript
$(document).ready(function() {
$('#search-input').on('keyup', function() {
var query = $(this).val();
$.ajax({
url: '/search',
data: {query: query},
success: function(data) {
var results = JSON.parse(data);
var $list = $('#search-result');
// 清空原有查询结果
$list.empty();
// 显示新的查询结果
for (var i = 0; i < results.length; i++) {
var item = results[i];
var $li = $('<li>').text(item.title);
$list.append($li);
}
}
});
});
});
```
后端服务器部分(使用 Python Flask 框架):
```python
from flask import Flask, request, jsonify
app = Flask(__name__)
@app.route('/search')
def search():
query = request.args.get('query')
# TODO: 在数据库中查询匹配的数据
results = [{'title': 'result 1'}, {'title': 'result 2'}]
return jsonify(results)
if __name__ == '__main__':
app.run()
```
这个示例代码可能并不能直接使用于你的项目,但是可以作为一个基础参考,帮助你理解 AJAX 模糊查询的实现过程。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)