python flask框架实现传数据到js的方法分析


Posted in Python onJune 11, 2019

本文实例讲述了python flask框架实现传数据到js的方法。分享给大家供大家参考,具体如下:

首先要清楚后台和前端交互所采用的数据格式。

一般选JSON,因为和js完美贴合。

后台返回的数据进行序列化

/homepageRecommend 路由的 view方法中返回序列化数据

dict = {"a":1, "b":2}<br data-filtered="filtered">
import json
json.dumps(dict)

2)

from flask import jsonify
jsonify(dict) #在调用jsonfiy 有时会报错,原因是jsonify 对象必须是dict

这两种序列化方式主要的区别是 jsonify 格式更美观一些

在前端利用jquary 对json进行反序列化

$.getJSON('/homepageRecommend'
    , function(data) {          // 从Flask返回的数据
      alert(data.a)           // 浏览器弹窗显示 后端返回的dict["a"]的值,此次是1
  }
)
//getJSON 函数有三个参数
//第一个是后端返回的数据的url
//第二个是要返回给服务器的data 是可选的
//第三个是对获取的反序列化数据 要继续进行的操作的函数

前端通过.get()或者.get()或者.post()方法发送请求,后端利用json.dumps(dict)返回json数据,在js中利用eval()方法,把json数据转换为js对象,后再做其他处理

$.post("{{ url_for('statistics.HomeRecommend') }}",{"id":a},function(reco_list){
 var reco_list = eval(reco_list)
//do others
})

最近在使用icharts画图的 过程中发现了另外一种传数据的方式,view中使用

return render_template('statistics/numberofuserlogin/login_number.html', result_json = json.dumps(result))

js中直接用 js_object = eval('{{result_json|safe }}') 注意 一定要加|safe 过滤否则会对字符串进行转义导致解析错误 使用这种方式传数据,能够在渲染模板的同时传数据,避免定义新的url拿数据

总结: flask 后台给前端js传数据, 需要注意序列化 和反序列化

更多资料参考 https://3water.com/article/162815.htm

希望本文所述对大家基于Flask框架的Python程序设计有所帮助。

Python 相关文章推荐
python算法学习之基数排序实例
Dec 18 Python
详解Python多线程
Nov 14 Python
Python使用smtp和pop简单收发邮件完整实例
Jan 09 Python
深入了解Python中pop和remove的使用方法
Jan 09 Python
Python实现XML文件解析的示例代码
Feb 05 Python
python 读取文件并替换字段的实例
Jul 12 Python
使用Python的SymPy库解决数学运算问题的方法
Mar 27 Python
Ubuntu16.04安装python3.6.5步骤详解
Jan 10 Python
基于Python实现人脸自动戴口罩系统
Feb 06 Python
TensorFlow:将ckpt文件固化成pb文件教程
Feb 11 Python
Python中qutip用法示例详解
Oct 02 Python
Django模型层实现多表关系创建和多表操作
Jul 21 Python
python 求一个列表中所有元素的乘积实例
Jun 11 #Python
python ChainMap的使用和说明详解
Jun 11 #Python
python 计算一个字符串中所有数字的和实例
Jun 11 #Python
python 实现返回一个列表中出现次数最多的元素方法
Jun 11 #Python
python ChainMap 合并字典的实现步骤
Jun 11 #Python
itchat-python搭建微信机器人(附示例)
Jun 11 #Python
python itchat实现调用微信接口的第三方模块方法
Jun 11 #Python
You might like
echo, print, printf 和 sprintf 区别
2006/12/06 PHP
php中用于检测一个地理IP地址是否可用的代码
2012/02/19 PHP
PHP手机号码归属地查询代码(API接口/mysql)
2012/09/04 PHP
PHP学习笔记 IIS7下安装配置php环境
2012/10/29 PHP
php实现根据词频生成tag云的方法
2015/04/17 PHP
Yii2 中实现单点登录的方法
2018/03/09 PHP
PHP Primary script unknown 解决方法总结
2019/08/22 PHP
TNC vs BOOM BO3 第二场2.13
2021/03/10 DOTA
关于extjs4如何获取grid修改后的数据的问题
2013/08/07 Javascript
jQuery响应enter键的实现思路
2014/04/18 Javascript
javaScript年份下拉列表框内容为当前年份及前后50年
2014/05/28 Javascript
js结合正则实现国内手机号段校验
2015/06/19 Javascript
基于jQuery+Cookie实现的防止刷新的在线考试倒计时
2015/06/19 Javascript
JS+CSS实现的漂亮渐变背景特效代码(6个渐变效果)
2016/03/25 Javascript
jquery自适应布局的简单实例
2016/05/28 Javascript
AngularJS基础 ng-dblclick 指令用法
2016/08/01 Javascript
JS获取中文拼音首字母并通过拼音首字母快速查找页面内对应中文内容的方法【附demo源码】
2016/08/19 Javascript
Bootstrap表单控件学习使用
2017/03/07 Javascript
Vue 2中ref属性的使用方法及注意事项
2017/06/12 Javascript
JS之if语句对接事件动作逻辑(详解)
2017/06/28 Javascript
vue.js组件之间传递数据的方法
2017/07/10 Javascript
vue mintui-Loadmore结合实现下拉刷新和上拉加载示例
2017/10/12 Javascript
jQuery实现文字超过1行、2行或规定的行数时自动加省略号的方法
2018/03/28 jQuery
vuejs项目打包之后的首屏加载优化及打包之后出现的问题
2018/04/01 Javascript
vue检测对象和数组的变化分析
2018/06/30 Javascript
Postman内建变量常用方法实例解析
2020/07/28 Javascript
python中while循环语句用法简单实例
2015/05/07 Python
python实现简易云音乐播放器
2018/01/04 Python
Python爬豆瓣电影实例
2018/02/23 Python
Python 网络编程之TCP客户端/服务端功能示例【基于socket套接字】
2019/10/12 Python
python绘制随机网络图形示例
2019/11/21 Python
通信工程专业女生个人求职信
2013/09/21 职场文书
电子专业求职信
2014/06/19 职场文书
超市理货员岗位职责
2014/07/04 职场文书
班组拓展活动方案
2014/08/14 职场文书
Vue接口封装的完整步骤记录
2021/05/14 Vue.js