Flask(python)异步(ajax)返回json格式数据
主要讨论两个问题,第一个是关于json.dumps 与jsonify区别,第二个是几种异步的区别(见jQuery中的$.getJSON、$.ajax、$.get、$.post的区别)。
json.dumps()和jsonify()的区别
- 使用方法不同:
dumps和loads方法,来自json模块,而json模块是python中的,可以直接导入:
import json
而jsonify是flask封装的扩展包
from flask import jsonify
- 作用不同:
①dumps()和loads()
json.dumps():把字典转成json字符串,
json.loads():把json字符串转成字典
他们操作的都是变量(变量是存储在内存中的)。
②jsonify
字典转成json字符串
- 效果不同:
①json.dumps()查看响应信息(Content-Type:响应内容的类型):Content-Type:text/heml;charset=utf-8
②jsonify查看浏览器响应信息(Content-Type:响应内容的类型):Content-Type: application/json
相关代码如下:
新建flask项目,建立一个app.py文件,代码如下:
# coding: utf-8
from flask import Flask, render_template, url_for, request, json, jsonify
from flask_bootstrap import Bootstrap app = Flask(__name__)
app.config['JSON_AS_ASCII'] = False @app.route('/form_data', methods=['GET', 'POST'])
def form_data():
if request.method=='GET':
username = request.args.get("username")
#dumps和loads方法,来自json模块,而json模块是python中的,可以直接导入:
#而jsonify是flask封装的扩展包
return jsonify({'status': '', 'username': username, 'errmsg': '登录成功!'})
else:
username = request.form['username']
return jsonify({'status': '', 'username': username, 'errmsg': '登录成功!'}) @app.route('/')
def index():
return render_template('test.html') if __name__ == '__main__':
app.run(debug=True)
再在templates文件夹下新建test.html文件,代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action='{{ url_for('form_data') }}' method="POST">
<input name="username" type="text"/>
<input type="submit"> </form>
<Br>
<input type="button" name="sendjson" value="提交" id="sendjson">
<div id="myDiv"></div>
<script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>
<script>
$("#sendjson").click(function () {
params = {"username": "lisi"} {#$.getJSON("{{ url_for('form_data') }}",params, function (result) {#}
{# $("#myDiv").append("hello world1");#}
{# console.log(obj.username + "<br>");#}
{# });#} {#$.ajax({#}
{# "url": "{{ url_for('form_data') }}",#}
{# "type": "POST",#}
{# "data": params,#}
{# "success": function (obj) {#}
{# $("#myDiv").append("hello world")#}
{# console.log(obj.username + "<br>")#}
{# },#}
{# "error": function (obj) {#}
{# console.log(obj)#}
{# },#}
{# "dataType": "json",#}
{# "async": true#}
{# });#} {#$.get("{{ url_for('form_data') }}", params, function (obj) {#}
{# $("#myDiv").append("hello world")#}
{# console.log(obj.username + "<br>");#}
{# }, "json");#} $.post("{{ url_for('form_data') }}", params, function (obj) {
$("#myDiv").append(obj.username + "<br>")
console.log(obj);
}, "json");
})
{#$('#sendjson').bind('click', submit_form);#}
</script>
</body>
</html>
案例截图:

返回结果:

Flask(python)异步(ajax)返回json格式数据的更多相关文章
- springmvc通过ajax异步请求返回json格式数据
jsp 首先创建index.jsp页面 <script type="text/javascript"> $(function () { $("#usernam ...
- var dataObj=eval("("+data+")");//转换为json对象(解决在ajax返回json格式数据的时候明明正确的获取了返回值但是却就是进不去success方法的问题。格式错误)
一,原理 1.1,解析1 将字符串解析为JavaScript代码,比如:var a = "alert('a');";这里的a就只是一个字符串而已,输出的话也是alert(a);这句 ...
- 使用jQuery发送POST,Ajax请求返回JSON格式数据
问题: 使用jQuery POST提交数据到PHP文件, PHP返回的json_encode后的数组数据,但jQuery接收到的数据不能解析为JSON对象,而是字符串{"code" ...
- 使用getJSON()方法异步加载JSON格式数据
使用getJSON()方法异步加载JSON格式数据 使用getJSON()方法可以通过Ajax异步请求的方式,获取服务器中的数组,并对获取的数据进行解析,显示在页面中,它的调用格式为: jQuery. ...
- springmvc4.0配置ajax请求json格式数据
1.导入相关jar包:jackson-annotation-2.5.4.jar,jackson-core-2.5.4.jar,jackson-databind-2.5.4.jar. 2.spring- ...
- WebService返回json格式数据供苹果或者安卓程序调用
1.新建一个WebService. 2. /// <summary> /// DemoToJson 的摘要说明 /// </summary> [WebService(Names ...
- Django 1.8.11 查询数据库返回JSON格式数据
Django 1.8.11 查询数据库返回JSON格式数据 和前端交互全部使用JSON,如何将数据库查询结果转换成JSON格式 环境 Win10 Python2.7 Django 1.8.11 返回多 ...
- Spring MVC 学习笔记11 —— 后端返回json格式数据
Spring MVC 学习笔记11 -- 后端返回json格式数据 我们常常听说json数据,首先,什么是json数据,总结起来,有以下几点: 1. JSON的全称是"JavaScript ...
- 返回json格式数据乱码
本文为博主原创,未经允许不得转载: 原本返回json格式数据的代码: @ResponseBody @RequestMapping(value = "getListByTime", ...
- ajax请求后台,返回json格式数据,模板!
添加一个用户的时候,需要找出公司下所有的部门,和相应部门下的角色,利用ajax请求,实现联动技术.将返回的json格式数据,添加到select标签下. <script type="te ...
随机推荐
- python加密
""#line:4 __all__ =[]#line:6 class OO0O0O000O0O0O000 :#line:8 ""#line:9 def __in ...
- Fiddler模拟自动响应数据
Fiddler模拟自动响应数据 定位到要修改的部分 2.将返回的数据保存到本地,保存成网页,并修改响应数据 找到修改的部分,修改之 3.再次请求刷新首页,将工具定位到autoresponder将接口加 ...
- hdu4507 数位dp+推公式
推公式的能力需要锻炼.. /* dp的时候要存结构体 里面三个元素: cnt,就是满足条件的个数 sum1,就是满足条件的数字和 sum2,满足条件的数字平方和 推导过程:还是用记忆化搜索模板 dp[ ...
- python 学习第四天
2.5列表list. 列表是python中的基础数据类型之一,其他语言中也有类似于列表的数据类型,比如js中叫数组,他是以[]括起来,每个元素以逗号隔开,而且他里面可以存放各种数据类型比如: li = ...
- css中的宽度
浏览器通过CSS对元素的盒子模型的描述进行页面渲染的.因此,元素的宽度受到父元素.css描述的影响. 通常,元素的宽度是指盒子模型中content-box所占用的宽度.也就是说,默认box-sizin ...
- .NET Core 添加Java 服务引用(WebService) 曲折历程(一)
背景: 需要在HangFire定时任务中加入请求Java开发的WebService接口.定时获取数据同步数据.现有的代码是在VS2017 ,.Net Core 下创建的,添加WS发现系统不支持. 在C ...
- SQL反模式学习笔记22 伪键洁癖,整理数据
目标:整理数据,使不连续的主键Id数据记录变的连续. 反模式:填充断档的数据空缺. 1.不按照顺序分配编号 在插入新行时,通过遍历表,找到的第一个未分配的主键编号分配给新行,来代替原来自动分配的伪主键 ...
- CodeForces - 1013B And 与运算暴力
题目链接: https://vjudge.net/problem/1735275/origin 基本思路: 本题思路比较简单,首先,我们知道 a & x = b, b & x = b; ...
- [POJ2965]The Pilots Brothers' refrigerator (搜索/位运算)
题意 游戏“The Pilots Brothers:跟随有条纹的大象”有一个玩家需要打开冰箱的任务. 冰箱门上有16个把手.每个手柄可以处于以下两种状态之一:打开或关闭.只有当所有把手都打开时,冰箱才 ...
- linux(debian) arm-linux-g++ v4.5.1交叉编译 embedded arm 版本的QtWebkit (browser) 使用qt 4.8.6 版本 以及x64上编译qt
最近需要做一个项目 在arm 架构的linux下 没有桌面环境的情况下拉起 有界面的浏览器使用. 考虑用qt 的界面和 qtwebikt 的库去实现这一系列操作. 本文参考: Qt移植到ARM Lin ...