前端與後端數據交互 jQuery Ajax+Python Flask (附詳細代碼)

原文鏈接：https://www.jianshu.com/p/4350065bdffe

回憶一下遇到的坑:

1.<form>標籤下的<input>、<textarea>等標籤必須帶有name屬性才能被form捕捉提交。

2.POST方法提交時要用request.form來獲取,而用GET方法則用request.args來獲取。

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

放兩張截圖來直觀看一下請求