AJAX与JSON与Controller使用小结

Posted 2021-04-15 浴间沉思录

        对于一个简单的JavaWeb项目来说，前后端利用AJAX+JSON进行数据的交互是最常见的选择了，后端的话一般是在Controller层进行接收，本人作为SpringBoot的拥护者自然选择了最常见的Controller来接收数据！下面就举例来说明各方式间的区别。

1.AJAX+JSON字符串+@RequestBody注解

这边先以jQuery提供的AJAX方法为例：

$.ajax({

type: "POST",

dataType: "json", //预期服务器返回的数据类型

url: "/addComment" ,//url

data: JSON.stringify(jsonObj),

contentType:"application/json",  //预期发送给服务器的数据类型

success: function (result) {

// 成功事件

},

error : function() {

// 异常事件

}

});

对于JSON来说，有JSON对象，JSON字符串这些形式，这边利用jQuery提供的JSON.stringify工具来将json对象转成了JSON字符串。

后端的Controller层：

public Map addComment(@RequestBody TakeoutComment takeoutComment);

通过@RequestBody注解会自动把JSON字符串转成参数指定的实体类；

如果不使用注解的话，就需要用String类型的参数把JSON字符串获取下来然后再自己手动利用fastjson或者jackson等其他工具进行JSON-javaBean的转换。

2.AJAX+K-V对象

$.ajax({

    type: "post",

    url: parent.contextPath + "user/addUser",

    async: false,

    cache: false,

    //contentType: "application/json",这时候不需要配置这个

    data: {"userName":"101040000"},

    success: function (data) {

        // 成功事件

    }

});

这种传参方式传的不是 JSON对象；就是普通的key-value对象,所以 ajax参数里就不用定义 contentType:"application/json" 了,否则会导致解析出错（error415）。如果想多传几个参数,就在data 的 {"userName":"101040000","xxxxxx":"yyyyyy"} 里面使用的都是双引号，数据间用逗号隔开,最后一个值后面就别写逗号了,会使得 ajax 无效的。

Controller层：

@RequestMapping("/addUser")

@ResponseBody

public String addUser(User user){  return user.getUserName();  }

可以直接用JavaBean对象接收。

3.AJAX+JSON对象+@RequestBody注解

这种方法主要注意以下几点：

• ajax 要加上 contentType:"application/json",

• ajax 的 data 属性的值要用单引号括起来,里面的参数的写法照常写就行，字符型用双引号，Boolean和数字可以不加引号，具体可以参考下【严格JSON格式】

• 后台Controller的入参前面要加上@RequestBody,不加的话,是接收不到前端传来的 json 数据的。

  
  

4.AJAX+@RequestParm注解

这种方式里，我们在ajax参数里放入的是序列化表单值后的结果，使用方法：$("form").serialize()序列化后的数据是这个样子的：FirstName=Bill&LastName=Gates&sex=Girl，即：讲键值对打平成用&拼接的字符串，这时候就可以在Controller的入参前利用@RequestParm来获取序列化字符串中的键值，注意入参的参数名要和键值对中的一致。注意，使用这种方式进行交互的时候参数里的contentType:"application/json",也无需配置。

5.拓展：表单与对象

实际应用中，我们在进行前后端的数据交互时往往不是这样简单的一两个参数而已，还会经常需要与表单的提交进行结合，第四种方式适用于表单的提交，但是后台参数就需要写很多，为了适用前几种JSON的方法，往往还需要引入form-对象的这种转换，这边提供一个参考方法：

$.fn.serializeObject = function() {

    var o = {};

    var a = this.serializeArray();

    $.each(a,

    function() {

        if (o[this.name]) {

            if (!o[this.name].push) {

                o[this.name] = [o[this.name]];

            }

            o[this.name].push(this.value || '');

        } else {

            o[this.name] = this.value || '';

        }

    });

    return o;

}

6.JSON对象？javascript对象？JSON字符串？：各自定义

JSON：JavaScript Object Natation，JavaScript对象的表现形式，已经发展成一种轻量级的数据交换格式。（JavaScript对象的表现形式，指定义JS对象的一种方式。数据交换格式，即用于交换的数据格式。）

javascript对象：javascript中，除开JavaScript原始值(字符串，数字，布尔值，null，正则表达式)的都是javascript对象

JSON对象：JSON对象这种叫法不太准确，可以理解为使用基于JSON的初始器定义的javascript对象

JSON字符串：符合JSON语法格式的字符串

7.拓展：替代功能

$.ajax({});虽然使用方便但是因为要写一堆参数看起来视乎不够简洁，有没有什么方法是能够代替的呢？答案就是DWR框架，这个框架可以实现像写Java一样在JS中调用后台的方法。