jQuery Ajax 前端和后端數據交互的問題

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

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

1、提交表單數據

    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) {
    }
});

 

    2）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) {
    }
});

 

3、前端向后端傳數據的方法

   1）通過url路徑傳遞參數

var id = 5;
boolean flag = false;

/**重點：ajax只需要type和url屬性*/
$.ajax({
    async: false,
    cache: false,
    type: 'POST',
    url: 'area/delete/' + flag + '/' + id, //（1）請求的action路徑,可以傳遞參數到后台
    error: function() {
        alert('請求失敗 ');
    },
    success: function(data) {
        alert(data);
    }
});

 

   2）通過Ajax.data屬性

 

var postData = { //（2）傳遞參數到后台，注意后台接收方式 
        "param1": "param1",
        "areaId": 2,
        "deleteId": 3,
        "ids": "254,249,248"
        /**重點：ajax的type,url,dataType,data屬性*/
        $.ajax({
            async: false,
            cache: false,
            type: 'POST',
            url: 'area/delete',
            dataType: "json",
            data: postData,
            error: function() {
                alert('請求失敗 ');
            },
            success: function(data) {
                alert(data);
            }

        });

 

   3）通過Ajax.data屬性傳遞多個參數

//第一步：定義json格式數據
var postData = {
    "param1": "param1",
    "areaId": 2,
    "deleteId": 3
};
/**ajax的type,url,dataType,contentType,data屬性*/
$.ajax({
    async: false,
    cache: false,
    type: 'POST',
    url: 'area/delete',
    dataType: "json",
    contentType: 'application/json', //第二步：定義格式
    data: JSON.stringify(postData), //第二步；把json轉為String傳遞給后台
    error: function() {
        alert('請求失敗 ');
    },
    success: function(data) {
        alert(data);
    }
});

 

 

文章轉載鏈接：

① https://www.jianshu.com/p/4350065bdffe （詳細的后台數據接收與返回）

② https://blog.csdn.net/dreamstar613/article/details/61912717 （js 和 java 的代碼解釋）