spring boot ajax post 前后端

1 傳輸的數據格式是json

1.1 前端ajax

json的所有的key都必須是雙引號引用的，並且最外層也要用雙引號引用。例如

"{"a":b, "b":c,}"，因為一般情況下js對象不是這樣的，js對象{a:b, b:c}，是沒有雙引號引用的。因此要用JSON.stringify()來進行一個轉換。

否則，該數據不會以json類型傳輸，而以x-www-form-urlencoded類型的數據傳輸。

1.2 后端controller

@RequestMapping中要用consumes="application/json"，在取參數時要用@RequestBody。

 

2 傳輸json的例子

2.1 前端ajax

function submitFormData() {
    var jsonVar = JSON.stringify($('form').serializeJSON());

    $.ajax({
        //幾個參數需要注意一下
        type: "POST",
        dataType: "json",
        contentType: "application/json",
        url: "/yunapp/task" ,
        data: jsonVar,
        success: function (result) {
            console.log(result);//打印服務端返回的數據(調試用)
            if (result.resultCode == 200) {
                alert("SUCCESS");
            }
            ;
        },
        error : function() {
            alert("異常！");
        }
    });
}

2.2 后端controller

@ResponseBody
@RequestMapping(value = "/task",
        method = RequestMethod.POST,
        consumes="application/json")
void handleTask(@RequestBody String jsonParamStr) {
    if (jsonParamStr == null) {
        return;
    }
}

3 關於$.ajax的返回值

success: function (result) {

},

error: function(jqXHR, textStatus, errorThrown) {

}

如果返回的是json的話，那么result就是返回的json值。

 

4 ajax的本質

用JavaScript寫一個完整的AJAX代碼並不復雜，但是需要注意：AJAX請求是異步執行的，也就是說，要通過回調函數獲得響應。

在現代瀏覽器上寫AJAX主要依靠XMLHttpRequest對象：

use strict';

function success(text) {
var textarea = document.getElementById('test-response-text');
textarea.value = text;
}

function fail(code) {
var textarea = document.getElementById('test-response-text');
textarea.value = 'Error code: ' + code;
}

var request = new XMLHttpRequest(); // 新建XMLHttpRequest對象

request.onreadystatechange = function () { // 狀態發生變化時，函數被回調
if (request.readyState === 4) { // 成功完成
// 判斷響應結果:
if (request.status === 200) {
// 成功，通過responseText拿到響應的文本:
return success(request.responseText);
} else {
// 失敗，根據響應碼判斷失敗原因:
return fail(request.status);
}
} else {
// HTTP請求還在繼續...
}
}

// 發送請求:
request.open('GET', '/api/categories');
request.send();

alert('請求已發送，請等待響應...');

 

參考：

https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/001434499861493e7c35be5e0864769a2c06afb4754acc6000