flask项目中,前端有3个文本框,分别是项目名称,手续费和保证金。要实现如下操作:手动输入项目名称,然后自动触发后端的sql查询语句,根据项目名称分别查询手续费和保证金的值,并在前端相应的文本框中显示。
时间: 2023-12-22 12:04:29 浏览: 130
基于Python和Flask实现的基金分析系统项目源码.zip
实现这个功能,需要前端与后端进行交互,可以采用前后端分离的方式。
首先,在前端页面中,需要设置一个输入框,让用户手动输入项目名称。然后,使用JavaScript编写一个事件监听器,当用户输入完成并按下回车键时,就会触发该事件。
在事件监听器中,可以使用Ajax技术向后端发送一个GET请求,请求的URL包含用户输入的项目名称。后端接收到请求后,根据项目名称查询数据库,获取手续费和保证金的值,然后通过JSON格式返回给前端。
前端收到后端返回的数据后,可以将手续费和保证金的值显示在相应的文本框中。以下是一个简单的示例代码:
前端HTML代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>Flask AJAX Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<h1>项目信息查询</h1>
<label>项目名称:</label>
<input type="text" id="project_name">
<br>
<label>手续费:</label>
<input type="text" id="fee" disabled>
<br>
<label>保证金:</label>
<input type="text" id="deposit" disabled>
<br>
<button type="button" onclick="query()">查询</button>
<script>
function query() {
var project_name = $('#project_name').val();
$.ajax({
url: '/query_project_info?project_name=' + project_name,
type: 'GET',
success: function(data) {
$('#fee').val(data.fee);
$('#deposit').val(data.deposit);
},
error: function() {
alert('查询失败');
}
});
}
</script>
</body>
</html>
```
后端Flask代码:
```python
from flask import Flask, jsonify, request
import pymysql
app = Flask(__name__)
@app.route('/')
def index():
return app.send_static_file('index.html')
@app.route('/query_project_info')
def query_project_info():
project_name = request.args.get('project_name')
conn = pymysql.connect(host='localhost', user='root', password='123456', db='test')
cur = conn.cursor()
cur.execute('SELECT fee, deposit FROM projects WHERE name = %s', project_name)
result = cur.fetchone()
cur.close()
conn.close()
if result is None:
return jsonify({'error': '项目不存在'})
else:
return jsonify({'fee': result[0], 'deposit': result[1]})
if __name__ == '__main__':
app.run()
```
在上面的代码中,`query_project_info`函数接收前端发送的GET请求,并从请求URL中获取项目名称。然后,连接数据库查询项目信息,并将查询结果封装成JSON格式返回给前端。
注意,在使用Flask的时候,需要在项目根目录下创建一个`templates`文件夹,并将前端HTML文件放在其中。同时,在Flask应用程序中,需要设置静态文件目录,以便Flask能够找到前端页面使用的JavaScript和CSS文件。
阅读全文