jQuery Ajax 前端和後端資料互動的問題

標籤：for   script   傳遞   app   charset   class   get請求   code   error   

原理：前端與後端的資料互動，最常用的就是GET、POST，比較常用的用法是：提交表單資料到後端，後端返回json

• 前端的資料發送與接收
  1）提交表單資料
  2）提交JSON資料
• 後端的資料接收與響應
  1）接收GET請求資料
  2）接收POST請求資料
  3）響應請求

1、提交表單資料

    1）GET請求

 1 var data = { 2     "name": "test", 3     "age": 1 4 }; 5 $.ajax({ 6     type: ‘GET‘, 7     url: /your/url/, 8     data: data,  // 最終會被轉化為查詢字串跟在url後面： /your/url/?name=test&age=1 9     dataType: ‘json‘,   // 注意：這裡是指希望服務端返回json格式的資料10     success: function(data) {   // 這裡的data就是json格式的資料11     },12     error: function(xhr, type) {13     }14 });

 

    2）POST請求

 1 var data = {} 2 // 如果頁面並沒有表單，只是input框，請求也只是發送這些值，那麼可以直接擷取放到data中 3 data[‘name‘] = $(‘#name‘).val() 4  5 // 如果頁面有表單，那麼可以利用jquery的serialize()方法擷取表單的全部資料 6 data = $(‘#form1‘).serialize(); 7  8 $.ajax({ 9     type: ‘POST‘,10     url: /your/url/,11     data: data,12     dataType: ‘json‘, // 注意：這裡是指希望服務端返回json格式的資料13     success: function(data) { // 這裡的data就是json格式的資料14     },15     error: function(xhr, type) {16     }17 });

 

【注意】
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

 1 // POST一個json資料 2  3 var data = { 4     “name”: "test", 5     "age", 1 6 } 7 $.ajax({ 8     type: ‘POST‘, 9     url: /your/url/,10     data: JSON.stringify(data),    // 轉化為字串11     contentType: ‘application/json; charset=UTF-8‘,12     dataType: ‘json‘,    // 注意：這裡是指希望服務端返回json格式的資料13     success: function(data) {   // 這裡的data就是json格式的資料14     },15     error: function(xhr, type) {16     }17 });

 

 文章轉載連結：https://www.jianshu.com/p/4350065bdffe （詳細的後台資料接收與返回）

jQuery Ajax 前端和後端資料互動的問題