大数据学习_Spring传接Json对象字符串

1. 前言

1.1 需求

  又一次写ajax请求，后台总是接收null，问题原因是Json格式没缕清，此篇文章好好整理下。
  此块的需求如下：
  实现网页端基于ajax请求发送页面input标签中的一个字符给后端控制层，控制层拿到数据调用方法后返回一个对象给前端，前端接收到对象后执行业务响应。

---

---

---

---

1.2 实现

  贴上成功代码：

// 1.前端为input绑定一个change事件函数，内容改变时发送POST类型的ajax请求
<script>
        $("#dep_id").change(function () {
            var dep_id = $("#dep_id").val();
            let url = '${pageContext.request.contextPath}/department/findById';
            $.ajax({
                type: 'POST',
                url: url,
                data:{"dep_id":dep_id},    
                dataType : "json",
                //成功响应的结果
                success : function (resp) {...}                              
            })
        })
    </script>

// 2.后端接收dep_id并调用业务层方法
// 这里是基于id属性对数据库进行查询，返回查询到的department
@Controller
@RequestMapping("/department")
public class DepartmentController {

    @Autowired
    private DepartmentService departmentService;

    @RequestMapping("/findById")
    @ResponseBody
    public Department findById(Integer dep_id) {
        //System.out.println(dep_id);
        Department department = departmentService.findById(dep_id);
        if(null==department){
            department = new Department();
        }
        return department;
    }
}

2. Ajax发送请求中的Json格式

  首先回顾一下Ajax：Ajax 即"Asynchronous Javascript And XML"（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。即无需重新加载整个网页，便能够更新部分网页的技术。通过在后台与服务器进行少量数据交换，使网页实现异步更新。

2.1 jQuery封装后的ajax

  jQuery对js原生的ajax进行了封装，封装后的ajax的操作方法更简洁，功能更强大，与ajax操作相关的jquery方法有：

请求方式	语法
GET请求	$.get(url, [data], [callback], [type])
POST请求	$.post(url, [data], [callback], [type])
AJAX请求	$.ajax([settings])

  AJAX请求常用属性：

属性名称	解释
url	请求的服务器端url地址
async	(默认: true) 默认所有请求均为异步请求。如要发送同步请求，设置为false
data	发送到服务器的数据，可以是键值对形式，也可以是js对象形式
type	(默认: “GET”) 请求方式 (“POST” 或 “GET”)
contentType	发送数据到服务器时所使用的内容类型。默认是：“application/x-www-form-urlencoded”
dataType	预期的返回数据的类型，取值可以是 xml, html, script, json, text, _defaul等
success	请求成功后的回调函数
error	请求失败时调用此函数

contentType在这里尤为重要：

<script>
        $("#btn1").click(function () {
            let url = '${pageContext.request.contextPath}/user/ajaxRequest';
            let data = {"id":1,"username":"张三"};
            $.ajax({
                type: 'POST',
                url: url,
                data : data,
                //contentType : 'application/json;charset=utf-8',
                success: function (resp) {
                    alert(JSON.stringify(resp));
                }
            })
        })
</script>

• 当不指定contentType，使用默认值时：
  
    此时请求体数据以标准的Form Data形式提交，多个数据间以&符号拼接，参数格式为key1=value1&key2=value2&…
  在这种情况多用于传输简单的数据，基于ssm开发时后台可以直接接收该数据，不需要在形参前添加 @RequestBody。
    比如传输 data = {“id”:1,“username”:“张三”}; 后台可以使用形参int id(此时形参名必须要等于想接收参数的key名)来接收data中的id值；其次也可以使用实体类对象来接收整个data，比如User user(User类中要具备id和username属性，类中必须提供key值的get/set方法)，这里好像mvc还是基于get/set方法去将接收到的data封装成类对象，如果类中有其他属性会自动设置为默认值。

• 当指定contentType : "application/json;charset=UTF-8"时：
  
    如果设置了contentType，请求体数据以Request Payload形式提交，ssm后台接收时必须在形参类型前使用@RequestBody注解，不使用注解后台没法对实体进行封装，会返回全部属性为null的对象。
  注意：
    这里可能会报JSON parse error：Unrecognized token ‘xx’ ，此时说明传参的格式不正确，通过data : JSON.stringify(data)可以解决，内部过程就是利用JSON.stringify 将js对象序列化(JSON字符串)，再使用JSON.parse来反序列化(还原)js对象。
    如果报了JSON parse error: Cannot deserialize instance of …，此时说明接收类不支持反序列化，该一定不是pojo类，则需要修改接收类。