Python：flask框架下前后端的数据交互_flask前端向后端传递数据

前提

后端：python 的 flask 框架
前端：html、css、js

一、前端发送数据，后端接受数据

1.1 路由传参数(数据)

• 方法一：

前端(html)：

<a href="{{url_for('choose', message_i=key, message_j=val)}}">供应商</a>    
// 注意choose是路由所在的函数，不是路由
1
2

后端(python)：

@app.route('/deal_rb/<key>,<val>', methods=['POST', 'GET'])
def choose(key,val)
	###
1
2
3

• 方法二：

前端(html)：

<a href="/detail/{{key}}/{{val}}">查看详细信息</a>
// 这里的detail是路由
1
2

后端(python)：

@app.route('/detail/<key>/<val>', methods=['POST', 'GET'])
def DeleteTag(key,val):
	###
1
2
3

1.2 表单提交

前端(html)：

<form action="http://localhost:5000/adm_user/query_r/" method="POST">
	<p>
		<input type="text" name="val">
		<input type="submit" name="op" value="查询">
		<input type="submit" name="op" value="显示全部">
	</p>
 </form>
1
2
3
4
5
6
7

表单可采用 “POST” 和 “GET” 两种提交方式，“POST” 比较常用，所以这里采用。注意这里有两个 submit 提交。

后端(python)：

@app.route('/adm_user/query_r/', methods=['POST', 'GET'])
def query():
    if request.method == 'POST':
    	th = request.form["op"]
    	val = request.form["val"]
    	if th == "查询":
        	###
    	elif th == "查询全部":
        	###
	elif request.method == 'GET':
        th = request.args.get("op")
        val = request.args.get("val")
        if th == "查询":
        	###
    	elif th == "查询全部":
        	###
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

二、后端发送数据，前端接受数据

后端(python)：

from flask import render_template

@app.route('/adm_user/reader/')
def reader():
    data = {
    	1: ['10001', '123', 'Mike', '男', '21'],
    	2: ['10002', '123', 'Sam', '男', '25'],
    	3: ['10003', '123', 'hong', '女', '20']
	}
    return render_template('reader.html', data_dict=data, status="error")
1
2
3
4
5
6
7
8
9
10

data 和 status 是想要发送到前端的数据,我的数据 data 是字典，status 是字符串。同时前端 reader.html 接受数据。

前端(html)：

<table>
	{% for k,v in data_dict.items() %}
		<tr>
			<td>{{k}}</td>
			<td>{{v[0]}}</td>
			<td>{{v[1]}}</td>
			<td>{{v[2]}}</td>
			<td>{{v[3]}}</td>
			<td>{{v[4]}}</td>
		</tr>
	{% endfor %}
</table>

{% if status == "error" %}
	<script>
		alert("操作失败！")
	</script>
{% endif %}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

这里我直接用嵌入式的 for 和 if 语句来输出后端传来的数据。