Flask的jsonify模塊、json前后端交互數據、$.ajax()方法詳解

一、Flask中可以使用Python自帶的json模塊，也可以使用Flask中的jsonify

代碼示例：

from flask import Flask, jsonify

app = Flask(__name__)

json_data = [
  {"name":"json", "age":123} 
]

@app.route('/jsontest', methods=['GET'])
def get_json():
  return jsonify({'data': json_data})      #使用jsonify之后會轉成對象格式

app.run()

二、JSON 前后端交互數據

交互數據概念

當數據在瀏覽器和服務器之間交互時，數據只能是文本（也可以理解為字符串格式）
JSON屬於文本，我們需要把JavaScript對象轉換成JSON，然后將JSON發送到服務端，也可以從服務器將JSON發送到前端轉換成JavaScript對象

將JavaScript對象轉成JSON格式字符串使用JSON.stringify()

如果你的數據存儲在JavaScript對象中，你需要把該對象轉成JSON格式字符串,然后將其發送到服務器。使用JSON.stringify()
示例：
var myObj = { name:"Bill Gates",  age:62, city:"Seattle" };
var myJSON = JSON.stringify(myObj);
window.location = "demo_json.php?x=" + myJSON;

將JSON格式字符串轉成JavaScript對象使用JSON.parse()

JSON格式接收到數據，將其轉換成JavaScript對象，使用：JSON.parse()
示例：
var myJSON = '{ "name":"Bill Gates",  "age":62, "city":"Seattle" }';
var myObj = JSON.parse(myJSON);
document.getElementById("demo").innerHTML = myObj.name;

三、$.ajax()方法詳解（常用參數）

1.url    要求為String類型的參數，（默認為當前頁地址）發送請求的地址     url: '/labels_csv/'
2.type   要求為String類型的參數，請求方式（post或get）默認為get。注意其他http請求方法，例如put和delete也可以使用，但僅部分瀏覽器支持。    type: 'POST'
3.data   要求為Object或String類型的參數，發送到服務器的數據。如果已經不是字符串，將自動轉換為字符串格式      {"ta": ta_csv} 4.contentType    要求為String類型的參數，當發送信息至服務器時，內容編碼類型默認為"application/x-www-form-urlencoded"。  contentType:'application/json'
5.dataType     要求為String類型的參數，預期服務器返回的數據類型    dataType:'json'
6.success   要求為Function類型的參數，請求成功后調用的回調函數，有兩個參數。
 (1)由服務器返回，並根據dataType參數進行處理后的數據。
 (2)描述狀態的字符串。
success:function (data) { alert(data) }

示例：

  $.ajax({
          url:'',
          type:'post',
          data:pos,  //發送的數據
          contentType:'application/json',  //告訴后端你這次的數據是json格式
　　　　　　dataType:'json',
          success:function (data) {
              alert(data)
          }
      })

常用部分參數詳解

1.type:get和post的區別 1.GET請求中將data數據附加在url后，POST請求將data數據發送給服務器。
2.POST請求必須設置請求頭Content-Type值為application/x-form-www-urlencoded，默認是application/x-form-www-urlencoded

2.contentType：設置頁面發送至服務器數據類型
四種常見的POST提交數據方式
(1)application/x-www-form-urlencoded     默認的
(2)multipart/form-data
(3)application/json     一般設置json格式數據
(4)text/xml

3.data：服務器返回的數據
GET請求中將data數據附加在url后，對象必須是key/value格式，例如{foo1:"bar1",foo2:"bar2"}轉換為: ?foo1=bar1&foo2=bar2
如果是數組，例如{foo:["bar1","bar2"]}轉換為:  ?foo=bar1&foo=bar2
POST請求將完整的數據傳給前端頁面

4.dataType:預期服務器返回的數據類型
xml:返回XML文檔，可用JQuery處理
html:返回純文本HTML信息，包含的script標簽會在插入DOM時執行
script:返回純文件JavaScript代碼
json:返回JSON數據
text:返回純文本字符串