主要讨论两个问题,第一个是关于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>
案例截图:
返回结果: