前端與後端的數據交互（jquery ajax+python flask）

前端與後端的數據交互，最經常使用的就是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