flask项目中,前端有5个文本框,分别是项目名称、项目金额、项目期限、保证金和手续费。我要实现一个功能,就是输入项目名称后,就能自动根据项目名称查询出其他条目的值并在前端相应的文本框中显示
时间: 2024-01-21 18:17:35 浏览: 24
你可以通过前端发送 Ajax 请求到后端,后端接收到请求后根据项目名称进行查询,查询结果返回到前端,前端再将结果填充到相应的文本框中。
具体实现步骤如下:
1. 在前端页面中添加一个输入框和其他需要显示查询结果的文本框,并绑定一个事件监听器,当输入框的值发生变化时触发事件。
2. 在事件处理函数中,获取输入框中的值,并通过 Ajax 请求将项目名称发送到后端。
3. 在后端接收到请求后,根据项目名称进行查询,并将查询结果返回给前端。
4. 在前端接收到查询结果后,将结果填充到相应的文本框中。
以下是一个简单的示例代码:
前端代码:
```html
<html>
<head>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<input type="text" id="project-name">
<br>
项目金额:<input type="text" id="project-amount"><br>
项目期限:<input type="text" id="project-deadline"><br>
保证金:<input type="text" id="project-bond"><br>
手续费:<input type="text" id="project-fee"><br>
<script>
$(function () {
$('#project-name').on('input', function () {
var projectName = $(this).val();
$.ajax({
url: '/get_project_info',
type: 'post',
data: {projectName: projectName},
success: function (data) {
$('#project-amount').val(data.amount);
$('#project-deadline').val(data.deadline);
$('#project-bond').val(data.bond);
$('#project-fee').val(data.fee);
}
});
});
});
</script>
</body>
</html>
```
后端代码:
```python
from flask import Flask, jsonify, request
app = Flask(__name__)
@app.route('/get_project_info', methods=['POST'])
def get_project_info():
projectName = request.form.get('projectName')
# 根据项目名称查询其他条目的值
amount = 10000
deadline = '2021-12-31'
bond = 5000
fee = 1000
return jsonify({'amount': amount, 'deadline': deadline, 'bond': bond, 'fee': fee})
if __name__ == '__main__':
app.run()
```
你可以根据实际情况进行修改和调整。