前端與後端的數據交互(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 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


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章