spring boot ajax post 前后端-白红宇

spring boot ajax post 前后端

阅读量：6900 次

发布时间：2019-06-27

本文共 2241 字，大约阅读时间需要 7 分钟。

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

转载于:https://www.cnblogs.com/hustdc/p/9892306.html

你可能感兴趣的文章