前端與后端的數據交互，最常用的就是GET、POST，比較常用的用法是：提交表單數據到后端，后端返回json
- 前端的數據發送與接收
1）提交表單數據
2）提交JSON數據 - 后端的數據接收與響應
1）接收GET請求數據
2）接收POST請求數據
3）響應請求
前端的數據發送與接收
1. 提交表單數據
# GET請求
var data = {
"name": "test",
"age": 1
};
$.ajax({
type: 'GET',
url: /your/url/,
data: data, # 最終會被轉化為查詢字符串跟在url后面： /your/url/?name=test&age=1
dataType: 'json', # 注意：這里是指希望服務端返回json格式的數據
success: function(data) { # 這里的data就是json格式的數據
},
error: function(xhr, type) {
}
});
# POST請求
var data = {}
# 如果頁面并沒有表單，只是input框，請求也只是發送這些值，那么可以直接獲取放到data中
data['name'] = $('#name').val()
# 如果頁面有表單，那么可以利用jquery的serialize()方法獲取表單的全部數據
data = $('#form1').serialize();
$.ajax({
type: 'POST',
url: /your/url/,
data: data,
dataType: 'json', # 注意：這里是指希望服務端返回json格式的數據
success: function(data) { # 這里的data就是json格式的數據
},
error: function(xhr, type) {
}
});
注意：
A）參數dataType：期望的服務器響應的數據類型，可以是null, xml, script, json
B）請求頭中的Content-Tpye默認是Content-Type:application/x-www-form-urlencoded，所以參數會被編碼為 name=xx&age=1 這種格式，提交到后端，后端會當作表單數據處理
2. 提交JSON數據
如果要給后端傳遞json數據，就需要增加content-type參數，告訴后端，傳遞過來的數據格式，并且需要將data轉為字符串進行傳遞。實際上，服務端接收到后，發現是json格式，做的操作就是將字符串轉為json對象。
另外，不轉為字符串，即使加了content-type的參數，也默認會轉成 name=xx&age=1，使后端無法獲取正確的json
# POST一個json數據
var data = {
“name”: "test",
"age", 1
}
$.ajax({
type: 'POST',
url: /your/url/,
data: JSON.stringify(data), # 轉化為字符串
contentType: 'application/json; charset=UTF-8',
dataType: 'json', # 注意：這里是指希望服務端返回json格式的數據
success: function(data) { # 這里的data就是json格式的數據
},
error: function(xhr, type) {
}
});
后端的數據接收與返回
1. 接收GET請求數據
name = request.args.get('name', '')
age = int(request.args.get('age', '0'))
2. 接收POST請求數據
接收表單數據
name = request.form.get('name', '')
age = int(request.form.get('age', '0'))
接收Json數據
data = request.get_json()
get_json的源碼.png
另外，如果前端提交的數據格式不能被識別，可以用
request.get_data()接收數據。
微信公眾號后臺接收微信推送的xml格式的消息體，就可以用request.get_data()來接收
3. 響應請求
Flask可以非常方便的返回json數據
from Flask import jsonify
return jsonify({'ok': True})
jsonify源碼
看一下源碼就可以知道，jsonify就是幫我們做了點添加mimetype這樣的雜事，所以如果不嫌麻煩和難看，你也可以這樣寫
# 太丑了，還是別這么干了
return Response(data=json.dumps({'ok': True}), mimetype='application/json')
放兩張截圖來直觀看一下請求
post表單數據到服務端.png
Post JSON數據到服務端
