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