前排回憶一下遇到的坑:
1.<form>標籤下的<input>、<textarea>等標籤必須帶有name屬性才能被form捕捉提交。
2.POST方法提交時要用request.form來獲取,而用GET方法則用request.args來獲取。
本文從http://www.jianshu.com/p/4350065bdffe轉載
前端與後端的數據交互,最常用的就是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()
另外,如果前端提交的數據格式不能被識別,可以用request.get_data()接收數據。
微信公衆號後臺接收微信推送的xml格式的消息體,就可以用request.get_data()來接收
3.響應請求
Flask可以非常方便的返回json數據
from Flask import jsonify
return jsonify({'ok': True})
看一下源碼就可以知道,jsonify就是幫我們做了點添加mimetype這樣的雜事,所以如果不嫌麻煩和難看,你也可以這樣寫
# 太醜了,還是別這麼幹了
return Response(data=json.dumps({'ok': True}), mimetype='application/json')
放兩張截圖來直觀看一下請求