flask框架前后端数据交互

快来打我* 2021-11-06 00:24 598阅读 0赞

flask开发中需要用到ajax进行前端数据交互，主要流程为三步：

1.  前端引用js文件，调用其中函数
2.  后端完成调用数据库函数并设置数据格式
3.  js中使用ajax请求接收数据，并将返回的数据显示到前端

--------------------

代码展示：

1.  前端引用js文件，调用其中函数  
    方法一：直接在html文件中插入js代码

方法二：单独写一个js文件，再引入到html中，建议此方式。

<script src="{ { url_for('static', filename='js/jsFileName.js') }}"></script>
    
    
    <a href='#' data-toggle='modal' data-target='#myModal' onclick='function()'>点击</a>

注：如果是调用js文件，一定一定一定要记得在浏览器中强制刷新 Ctrl+F5，不然会缓存原有js文件，修改的代码无法生效，**建议**在浏览器中打开那个js文件，每次运行程序前手动刷新一下，当时试过设置浏览器 Diable cache ，但貌似无效。

--------------------

1.  后端完成调用数据库函数并设置数据格式

@route('/funcitonUrl', methods=['GET'])
    def function():
        topics = session.query(Topics).all()
        tp_list = []
        # print(type(topics))
        for topic in topics:
            tp_list.append({ "id": topic.id, "text": topic.text})
    
        # print(type(tp_list))
        # print(tp_list)
        return json.dumps(tp_list)

这里需要注意设置好传输数据的格式，最后返回使用 json.dumps.

--------------------

1.  js中使用ajax请求接收数据，并将返回的数据显示到前端

一定要先设置好接收的数据格式，并将其转换为JSON字符串，不然接收过来很难处理。最后三个函数是设置和清理定时器，具体说明可见 参考文章【5】

--------------------

参考文章：【1】[python通过flask和前端进行数据收发][python_flask]  
     【2】[前端与后端的数据交互（jquery ajax+python flask）][jquery ajax_python flask]  
     【3】[python flask 通过ajax向后台传递数组参数][python flask _ajax]  
     【4】[Ajax返回的json遍历取值并显示到前台][Ajax_json]  
     【5】[js中定时器的设置和清理][js]

[python_flask]: https://blog.csdn.net/we1583004we/article/details/81557240
[jquery ajax_python flask]: https://blog.csdn.net/github_38854366/article/details/78400978
[python flask _ajax]: https://blog.csdn.net/m0_38061194/article/details/78851152
[Ajax_json]: https://blog.csdn.net/qq_26079137/article/details/76188658
[js]: https://blog.csdn.net/qq_39564555/article/details/99061375