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实现k均值算法示例(k均值聚类算法)
Mar 16 Python
使用Python脚本在Linux下实现部分Bash Shell的教程
Apr 17 Python
Pycharm 设置自定义背景颜色的图文教程
May 23 Python
Python hexstring-list-str之间的转换方法
Jun 12 Python
Pycharm使用之设置代码字体大小和颜色主题的教程
Jul 12 Python
python 中的[:-1]和[::-1]的具体使用
Feb 13 Python
执行Python程序时模块报错问题
Mar 26 Python
Python使用jupyter notebook查看ipynb文件过程解析
Jun 02 Python
在Python3.74+PyCharm2020.1 x64中安装使用Kivy的详细教程
Aug 07 Python
用Python自动清理电脑内重复文件,只要10行代码(自动脚本)
Jan 09 Python
使用Djongo模块在Django中使用MongoDB数据库
Jun 20 Python
用Python生成会跳舞的美女
Jan 18 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
PHP禁止页面缓存的代码
2011/10/23 PHP
关于laravel后台模板laravel-admin select框的使用详解
2019/10/03 PHP
jquery获取ASP.NET服务器端控件dropdownlist和radiobuttonlist生成客户端HTML标签后的value和text值
2010/06/28 Javascript
IE6、IE7中setAttribute不支持class/for/rowspan/colspan等属性
2011/08/28 Javascript
JS onmousemove鼠标移动坐标接龙DIV效果实例
2013/12/16 Javascript
理解javascript函数式编程中的闭包(closure)
2016/03/08 Javascript
bootstrap table实现单击单元格可编辑功能
2017/03/28 Javascript
Express + Session 实现登录验证功能
2017/09/08 Javascript
轻松理解vue的双向数据绑定问题
2017/10/30 Javascript
javascript实现电脑和手机版样式切换
2017/11/10 Javascript
Vuex中mutations与actions的区别详解
2018/03/01 Javascript
vue新vue-cli3环境配置和模拟json数据的实例
2018/09/19 Javascript
Egg.js 中 AJax 上传文件获取参数的方法
2018/10/10 Javascript
JS查找孩子节点简单示例
2019/07/25 Javascript
微信小程序实现吸顶效果
2020/01/08 Javascript
原生js实现自定义难度的扫雷游戏
2021/01/22 Javascript
Vue 事件的$event参数=事件的值案例
2021/01/29 Vue.js
[01:20]DOTA2 齐天大圣至宝动态展示
2016/12/13 DOTA
[48:31]完美世界DOTA2联赛PWL S3 DLG vs Phoenix 第二场 12.17
2020/12/19 DOTA
python 判断是否为正小数和正整数的实例
2017/07/23 Python
详谈Numpy中数组重塑、合并与拆分方法
2018/04/17 Python
Python 删除整个文本中的空格,并实现按行显示
2018/07/24 Python
python使用wxpy轻松实现微信防撤回的方法
2019/02/21 Python
tensorflow如何继续训练之前保存的模型实例
2020/01/21 Python
详解CSS3中强大的filter(滤镜)属性
2017/06/29 HTML / CSS
获取邓白氏信用报告:Dun & Bradstreet
2019/01/22 全球购物
Belvilla法国:休闲度假房屋出租
2020/10/03 全球购物
int *p=NULL和*p= NULL有什么区别
2014/10/23 面试题
医药代表个人求职信范本
2013/12/19 职场文书
充分就业社区汇报材料
2014/05/07 职场文书
2014年个人年终总结
2015/03/09 职场文书
上课迟到检讨书范文
2015/05/06 职场文书
复兴之路观后感
2015/06/02 职场文书
2015选调生工作总结
2015/07/24 职场文书
关于使用Redisson订阅数问题
2022/01/18 Redis
MySQL派生表联表查询实战过程
2022/03/20 MySQL