flask的前后端交互方式
Posted pocean2012
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了flask的前后端交互方式相关的知识，希望对你有一定的参考价值。
以按键为例
1. 路由跳转
route修饰器在主程序指定处理函数，通过跳转到路径触发相应操作
超级链接跳转href
2. http方法传递参数，json返回
3. 网页js函数发送查询指令，json返回数据，回显或改变页面
ajax方式交换数据
python通过flask和前端进行数据收发_小明的专栏-CSDN博客_flask 获取前端数据
Flask学习总结笔记（12） -- 利用ajax进行前后端数据交互_kikaylee的专栏-CSDN博客_flask前后端数据交互
jquery+json方式交互数据
插件库下载地址
选择相应的版本，解压到/static目录下
前端，发送及接收数据，index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<label for="send_content">向后台发送消息：</label>
<input id="send_content" type="text" name="send_content">
<input id="send" type="button" value="发送">
</div>
<div>
<label for="recv_content">从后台接收消息：</label>
<input id="recv_content" type="text" name="recv_content">
</div>
<script src="/static/jquery-3.5.1/jquery-3.5.1.min.js"></script>
<!-- 发送 -->
<script type="text/javascript">
$("#send").click(function ()
var message = $("#send_content").val()
$.ajax(
url:"http://127.0.0.1:5000/send_message",
type:"GET",
data:
message:message
,
success:function (data)
alert(data)
,
error:function ()
alert("接收失败")
)
)
</script>
<!-- 接收 -->
<script type="text/javascript">
$("#send").click(function ()
$.getJSON("http://127.0.0.1:5000/change_to_json",function (data)
$("#recv_content").val(data.message) //将后端数据显示在前端
console.log("传到前端的数据的类型：" + typeof (data.message))
$("#send_content").val("")//发送的输入框清空
)
)
</script>
</body>
</html>
后端，接收及发送数据
from flask import Flask, render_template, request, jsonify
app = Flask(__name__)
@app.route('/')
def index():
return render_template("index.html")
@app.route('/send_message', methods=['GET'])
def send_message():
global message_get
message_get = ""
message_get = request.args['message']
print("收到前端发过来的信息：%s" % message_get)
print("收到数据的类型为：" + str(type(message_get)))
return "收到消息"
@app.route('/change_to_json', methods=['GET'])
def change_to_json():
global message_get
message_json =
"message": message_get
return jsonify(message_json)
if __name__ == '__main__':
app.run()
返回消息的是弹出的消息框，更新到网页控件的是更新的数据，console.log打印的信息在网页打开开发者工具的console窗口可以查看。
这是个典型的案例。
以上是关于flask的前后端交互方式的主要内容，如果未能解决你的问题，请参考以下文章