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

本文实例讲述了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://www.jb51.net/article/162815.htm

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

赞 (0)

相关推荐

  • python flask解析json数据不完整的解决方法

    当使用Python的flask框架来开发网站后台,解析前端Post来的数据,通常都会使用request.form来获取前端传过来的数据,但是如果传过来的数据比较复杂,其中右array,而且array的元素不是单个的数字或者字符串的时候,就会出现解析不到数据的情况,比如使用下面的js代码向python flask传递数据 $.ajax({ "url":"/test", "method":"post", "data&qu

  • 原生JS实现Ajax跨域请求flask响应内容

    Ajax方法好,网站感觉跟高大上,但由于Js的局限,跨域Ajax无法实现,这里,讲一下解决办法,前提是需要能够自己可以控制flask端的响应. 主要技术: 修改服务器相应的相应头,使其可以相应任意域名.and设置响应头,使其能够相应POST方法. 实现代码: 这里先放flask代码: from flask import make_response @app.route('/test',methods=['get','post']) def Test(): if request.method=='

  • Python Flask前后端Ajax交互的方法示例

    Python Flask前后端Ajax交互的方法示例

    之前总结过flask里的基础知识,现在来总结下flask里的前后端数据交互的知识,这里用的是Ajax 一. post方法 1.post方法的位置:在前端HTML里,绑定在一个按钮的点击函数里,或者一个鼠标输入框点击离开事件. (1)数据附在URL里(请求路径),发送到后端. /*前端HTML<script>里:*/ $.post("/js_post/"+ip, data_to_backend, function(data){alert("success "

  • Flask 让jsonify返回的json串支持中文显示的方法

    用flask时遇到了返回字符串支持中文显示的问题,在web端显示的是utf-8的编码,而不是中文,如下图. 虽然不影响接口的读取,但是可读性太差,于是研究了一下怎么直接显示成中文.最后找到了解决方案如下,在配置中加入下面一行代码就OK了. app.config['JSON_AS_ASCII'] = False json.dumps()解决同样的问题可以加入ensure_ascii=False 参考资料: http://stackoverflow.com/questions/37531067/py

  • jQuery实现Ajax功能分析【与Flask后台交互】

    本文实例讲述了jQuery实现Ajax功能.分享给大家供大家参考,具体如下: jQuery是一个小型的 JavaScript 库,它通常被用来简化 DOM 和 JavaScript 操作.通过在服务器和客户端之间交换 JSON 数据是使得 Web 应用动态化的完美方式. JSON 本身是一个很清量级的数据传输格式,非常近似于 Python 的原始数据类型 (数字.字符串.字典和链表等),这一数据格式被广泛支持,而且非常容易解析. 它几年前开始流行,然后迅速取代了 XML 在 Web 应用常用数据

  • 详谈在flask中使用jsonify和json.dumps的区别

    flask提供了jsonify函数供用户处理返回的序列化json数据,而python自带的json库中也有dumps方法可以序列化json对象,那么在flask的视图函数中return它们会有什么不同之处呢? 想必开始很多人和我一样搞不清楚,只知道既然框架提供了方法就用,肯定不会错. 但作为开发人员,我们需要弄清楚开发过程中各种实现方式的特点和区别,这样在我们面对不同的需求时才能做出相对合理的选择,而不是千篇一律地使用自己熟悉的.下面我就jsonify和json.dumps的区别这一问题简单探讨

  • 用ReactJS和Python的Flask框架编写留言板的代码示例

    近期要在生产环境上使用react,所以,自己学习了一下,写了一个简单的留言板小程序.完整的代码可以到这里下载:message-board Use 前端使用React,然后还有Bootstrap和jQuery,React负责前端展现,jQuery主要是向服务器发送ajax请求. 后端使用Flask和MongoDB,为前端提供数据.这里主要关注前端,对于后端不做过多说明. 使用webpack,对js文件进行打包. About React React是facebook开发一个用于前段交互的Javasc

  • Flask框架踩坑之ajax跨域请求实现

    业务场景: 前后端分离需要对接数据接口. 接口测试是在postman做的,今天才开始和前端对接,由于这是我第一次做后端接口开发(第一次嘛,问题比较多)所以在此记录分享我的踩坑之旅,以便能更好的理解,应用. 问题: 前端ajax请求后端接口出现跨域问题,如下图. 翻译:因为响应头没有"Access-Control-Allow-Origin",所以接口拒绝把数据返回给前端. 什么是Access-Control-Allow-Origin? Access-Control-Allow-Origi

  • python和flask中返回JSON数据的方法

    在python中可以使用json将数据格式化为JSON格式: 1.将字典转换成JSON数据格式: s=['张三','年龄','姓名'] t={} t['data']=s return json.dumps(t,ensure_ascii=False) 2.将列表转换成JSON数据格式: s=['张三','年龄','姓名'] return json.dumps(s,ensure_ascii=False) 使用json转换的在前端显示的数据为JSON字符串. 使用flask的jsonify转换后,在前

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

    本文实例讲述了python flask框架实现传数据到js的方法.分享给大家供大家参考,具体如下: 首先要清楚后台和前端交互所采用的数据格式. 一般选JSON,因为和js完美贴合. 后台返回的数据进行序列化 在/homepageRecommend 路由的 view方法中返回序列化数据 dict = {"a":1, "b":2}<br data-filtered="filtered"> import json json.dumps(di

  • Python Flask框架开发之运用SocketIO实现WebSSH方法详解

    Python Flask框架开发之运用SocketIO实现WebSSH方法详解

    Flask 框架中如果想要实现WebSocket功能有许多种方式,运用SocketIO库来实现无疑是最简单的一种方式,Flask中封装了一个flask_socketio库该库可以直接通过pip仓库安装,如下内容将重点简述SocketIO库在Flask框架中是如何被应用的,最终实现WebSSH命令行终端功能,其可用于在Web浏览器内实现SSH命令行执行. 首先我们先来看一下SocketIO库是如何进行通信的,对于前端部分需要引入socket.io这个框架,然后就是利用该框架内提供的各类函数实现创建

  • Python Flask框架实现Proteus仿真Arduino与网页数据交互

    目录 实验原理 开发环境 Flask虚拟环境 Python Flask源码 用Proteus仿真Arduino 用com0com建立虚拟串口对 运行程序 实验原理 模拟电脑通过串口与Arduino开发板通信,并通过网页实现简单交互 开发环境 1.Windows10 2.Python3.10 3.Proteus8.6 4.com0com虚拟串口工具 Flask虚拟环境 先安装virtualenv: pip install virtualenv 建立项目文件夹(比如demo_4) 在demo_04文

  • 使用python flask框架开发图片上传接口的案例详解

    使用python flask框架开发图片上传接口的案例详解

    python版本:3.6+ 需要模块:flask,pillow 需求:开发一个支持多格式图片上传的接口,并且将图片压缩,支持在线预览图片. 目录结构: app.py编辑内容: from flask import Flask, request, Response, render_template from werkzeug.utils import secure_filename import os import uuid from PIL import Image, ExifTags app =

  • python flask框架详解

    python flask框架详解

    Flask是一个Python编写的Web 微框架,让我们可以使用Python语言快速实现一个网站或Web服务.本文参考自Flask官方文档, 英文不好的同学也可以参考中文文档 1.安装flask pip install flask 2.简单上手 一个最小的 Flask 应用如下: from flask import Flask app = Flask(__name__) @app.route('/') def hello_world(): return 'Hello World' if __na

  • python flask框架快速入门

    python flask框架快速入门

    Flask 本身相当于一个内核,比如可以用 Flask 扩展加入ORM.窗体验证工具,文件上传.身份验证等.Flask 没有默认使用的数据库,你可以选择 MySQL,也可以用 NoSQL. 其 WSGI 工具箱采用 Werkzeug(路由模块),模板引擎则使用 Jinja2.这两个也是 Flask 框架的核心. Flask常用扩展包: Flask-SQLalchemy:操作数据库: Flask-script:插入脚本: Flask-migrate:管理迁移数据库: Flask-Session:S

  • Python Flask框架模板操作实例分析

    Python Flask框架模板操作实例分析

    本文实例讲述了Python Flask框架模板操作.分享给大家供大家参考,具体如下: 模板 在前面的示例中,视图函数的主要作用是生成请求的响应,这是最简单的请求.实际上,视图函数有两个作用:处理业务逻辑和返回响应内容.在大型应用中,把业务逻辑和表现内容放在一起,会增加代码的复杂度和维护成本.本节学到的模板,它的作用即是承担视图函数的另一个作用,即返回响应内容. 模板其实是一个包含响应文本的文件,其中用占位符(变量)表示动态部分,告诉模板引擎其具体值需要从使用的数据中获取.使用真实值替换变量,再返

  • Python Flask框架扩展操作示例

    本文实例讲述了Python Flask框架扩展操作.分享给大家供大家参考,具体如下: 请求上下文(request context) Flask有两大核心:Werkzeug和Jinja2.Werkzeug实现路由.调试和Web服务器网关接口.Jinja2实现了模板. request和response都属于请求上下文对象. 当调用app = Flask(name)的时候,创建了程序应用对象app: request 在每次http请求发生时,WSGI server调用Flask.call():然后在F

  • 详解Python Flask框架的安装及应用

    详解Python Flask框架的安装及应用

    目录 1.安装 1.1 创建虚拟环境 1.2 进入虚拟环境 1.3 安装 flask 2.上手 2.1 最小 Demo 2.2 基本知识 3.解构官网指导 Demo 3.1 克隆与代码架构分析 3.2 入口文件 init.py 3.3 数据库设置 3.4 蓝图和视图 4.其他 5.跑起 DEMO 1.安装 1.1 创建虚拟环境 mkdir myproject cd myproject python3 -m venv venv 1.2 进入虚拟环境 . venv/bin/activate 1.3

  • Python Flask框架使用介绍

    目录 1. 数据库连接池 2. wtfroms 3. 信号 3.1 内置信号 3.2 使用信号 3.3 自定义信号 4. 多app应用 5. flask-script 5.1 快速使用 5.2 自定制命令 1. 数据库连接池 使用 pymsql 链接数据库 导入:pip3 install dbutils pool.py 创建数据库连接池 from dbutils.pooled_db import PooledDB import pymysql POOL = PooledDB( creator=p

随机推荐