flask的前后端交互方式

海里的鱼2022

已于 2022-03-09 22:40:33 修改

阅读量5k

点赞数 1

文章标签： flask jquery python

于 2021-07-27 01:35:43 首次发布

本文链接：https://blog.csdn.net/pocean2012/article/details/119121373

版权

以按键为例

1. 路由跳转

route修饰器在主程序指定处理函数，通过跳转到路径触发相应操作

超级链接跳转href

2. http方法传递参数，json返回

3. 网页js函数发送查询指令，json返回数据，回显或改变页面

ajax方式交换数据

python通过flask和前端进行数据收发_小明的专栏-CSDN博客_flask 获取前端数据

Flask学习总结笔记（12） -- 利用ajax进行前后端数据交互_kikaylee的专栏-CSDN博客_flask前后端数据交互

jquery+json方式交互数据

插件库下载地址

jquery下载所有版本（实时更新）

选择相应的版本，解压到/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窗口可以查看。

这是个典型的案例。

海里的鱼2022

关注

1
点赞
踩
41

收藏

觉得还不错? 一键收藏
打赏
1
评论
flask的前后端交互方式

以按键为例1. 路由跳转route修饰器在主程序指定处理函数，通过跳转到路径触发相应操作超级链接跳转href2. http方法传递参数，json返回3. 网页js函数发送查询指令，json返回数据，回显或改变页面ajax方式交换数据https://blog.csdn.net/we1583004we/article/details/81557240https://blog.csdn.net/kikaylee/article/details/54885250jquery+
复制链接

扫一扫