Flask(python)异步（ajax）返回json格式数据

合集 - python(17)

1.Python的命令模式和交互模式2018-07-20 2.Python笔记2018-07-22 3.浅析python中的装饰器decorator2018-08-18 4.Python网络编程-Socket简单通信（及python实现远程文件发送）2018-08-18 5.python中的*args和**kw2018-08-16 6.Python脚本之安装linux源码包-Jenkins2018-08-14 7.Python 数据处理库pandas教程（最后附上pandas_datareader使用实例）2019-06-04 8.Python 机器学习库 NumPy 教程2019-06-03

9.Flask(python)异步（ajax）返回json格式数据2019-04-28

10.Python爬虫之urllib-登录博客园2019-01-03 11.（转载）python调用shell命令之os 、commands、subprocess2018-12-25 12.Head First Python-python面向对象2018-12-14 13.Head First Python-Python简单处理文件2018-09-07 14.Head First Python-Python中与文件相关的操作-读、处理、写2018-09-06 15.Python3实现自动查询成绩（主要使用的包有Tesseract-OCR、PIL、execjs、pytesseract、BeautifulSoup）2019-06-19 16.Python数据挖掘之随机森林2019-06-04 17.Python 绘图库Matplotlib入门教程2019-06-04

主要讨论两个问题，第一个是关于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': '0', 'username': username, 'errmsg': '登录成功!'})
    else:
        username = request.form['username']
        return jsonify({'status': '0', '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>