首页要求： 1.编写一个页面，页面中有一个输入框。 2.用户在输入框输入文字，发送ajax请求。 3.服务器接收到请求，根据输入的数据，进行模糊查询 4.服务器把查询的结果返回客户端，客户端显示结果。服务端表格和数据自己定义

要求： 1.编写一个页面，页面中有一个输入框。 2.用户在输入框输入文字，发送ajax请求。 3.服务器接收到请求，根据输入的数据，进行模糊查询 4.服务器把查询的结果返回客户端，客户端显示结果。服务端表格和数据自己定义

时间: 2023-05-12 09:07:44 浏览: 137

好的，这是一个比较基础的前后端交互的问题，以下是一个简单的实现方式：前端页面代码： ```html <!DOCTYPE html> <html> <head> <title>模糊查询</title> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script> </head> <body> <input type="text" id="input" placeholder="请输入查询关键字"> <button id="searchBtn">查询</button> <div id="result"></div> <script> $(function(){ $('#searchBtn').click(function(){ var keyword = $('#input').val(); $.ajax({ url: '/search', type: 'GET', data: {keyword: keyword}, success: function(data){ $('#result').html(data); } }); }); }); </script> </body> </html> ``` 后端代码： ```python from flask import Flask, request app = Flask(__name__) # 模拟数据 data = [ {'name': '张三', 'age': 18, 'gender': '男'}, {'name': '李四', 'age': 20, 'gender': '女'}, {'name': '王五', 'age': 22, 'gender': '男'}, {'name': '赵六', 'age': 24, 'gender': '女'} ] @app.route('/') def index(): return app.send_static_file('index.html') @app.route('/search') def search(): keyword = request.args.get('keyword') result = '' for item in data: if keyword in item['name']: result += '<p>姓名：{}，年龄：{}，性别：{}</p>'.format(item['name'], item['age'], item['gender']) return result if __name__ == '__main__': app.run() ``` 这个例子中，前端页面有一个输入框和一个查询按钮，当用户输入关键字并点击查询按钮时，会发送一个 GET 请求到 /search 路径，同时把输入框中的关键字作为参数传递给服务器。服务器接收到请求后，遍历模拟数据，找到包含关键字的数据，最后把结果返回给客户端。客户端收到结果后，把结果显示在页面上。

阅读全文