Spring MVC 与 Ajax Json 交互

一、Ajax Json 交互相关概念

1、什么是交互？

交互：两个方向。

1）前端到后台

前端 ajax 发送 json 格式字符串，后台直接接收为 pojo 参数，使用注解 @RequstBody。

2）后台到前端

后台直接返回 pojo 对象，前端直接接收为 json 对象或者字符串，使用注解 @ResponseBody。

2、什么是 Json？

Json 是一种与语言无关的数据交互格式，就是一种字符串，只是用特殊符号 {} 内表示对象、[] 内表示数组、“” 内是属性或值、: 表示后者是前者的值。
{“name”: “Michael”} 可以理解为是一个包含 name 为 Michael 的对象。
[{“name”: “Michael”}, {“name”: “Jerry”}] 就表示包含两个对象的数组。

3、@ResponseBody 注解

@responseBody 注解的作用是将 controller 的方法返回的对象通过适当的转换器转换为指定的格式之后，写入到 response 对象的 body 区，通常用来返回 JSON 数据或者是 XML 数据。
注意：在使用此注解之后不会再走视图处理器，而是直接将数据写入到输入流中，他的效果等同于通过 response 对象输出指定格式的数据。

二、在 Spring MVC 中使用 json 交互

1、所需 jar 包

<!-- json 数据交互所需 jar，start -->
<dependency>
  <groupId>com.fasterxml.jackson.core</groupId>
  <artifactId>jackson-core</artifactId>
  <version>2.9.0</version>
</dependency>
<dependency>
  <groupId>com.fasterxml.jackson.core</groupId>
  <artifactId>jackson-databind</artifactId>
  <version>2.9.0</version>
</dependency>
<dependency>
  <groupId>com.fasterxml.jackson.core</groupId>
  <artifactId>jackson-annotations</artifactId>
  <version>2.9.0</version>
</dependency>
<!--json数据交互所需jar，end-->

2、前端 jsp ⻚面及 js 代码

示例代码

<div>
    <h2>Ajax json交互</h2> 
    <fieldset>
        <input type="button" id="ajaxBtn" value="ajax提交"/> 
    </fieldset>
</div>

$(function () {
    $("#ajaxBtn").bind("click",function () {
        // 发送ajax请求 
        $.ajax({
            url: '/demo/handle07',
            type: 'POST',
            data: '{"id":"1","name":"李四"}',
            contentType: 'application/json;charset=utf-8', 
            dataType: 'json',
            success: function (data) {
                alert(data.name);
            }
        });
    });
});

3、后台 Handler 方法

@RequestMapping("/handle07")
// 添加 @ResponseBody 之后，不再走视图解析器那个流程，
// 而是等同于 response 直接输出数据。
public @ResponseBody User handle07(@RequestBody User user) {
    // 业务逻辑处理，修改 name 为张三丰 
    user.setName("张三丰"); 
    return user;
}

文章内容输出来源：拉勾教育Java高薪训练营；