主要討論兩個問題，第一個是關於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>
案例截圖：
返回結果：
