前端與後端的數據交互,最常用的就是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 jsonifyreturn jsonify({'ok': True})
jsonify源碼
看一下源碼就可以知道,jsonify就是幫我們做了點添加mimetype這樣的雜事,所以如果不嫌麻煩和難看,你也可以這樣寫
# 太醜了,還是別這麼幹了return Response(data=json.dumps({'ok': True}), mimetype='application/json')
放兩張截圖來直觀看一下請求
post表單數據到服務端.png
Post JSON數據到服務端
本文出自https://www.cnblogs.com/zeug/p/11441378.html
參考前端和後端的數據交互(jquery ajax+python flask+mysql)
鏈接https://blog.csdn.net/github_33873969/article/details/78723592