ResponseBody

当前端使用Ajax发送请求时，服务器要将数据以JSON的格式响应给浏览器

第一步：添加相关jar包

第二步：在spring的配置文件中写上<mvc:annotation-driven/>

第三步：映射方法的返回值为@ResponseBody

发送Ajax请求

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>$Title$</title>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
  </head>
  <body>
 <input type="button" value="请求JSON" id="btn"/>
<script>

    $(function () {
       $("#btn").click(function () {
          //发送Ajax
         /*  $.post("服务器地址","{发送请求时携带的参数}",function () {

           })*/
          //以post发送Ajax请求
         $.post("${pageContext.request.contextPath}/getJson",function (data) {
             console.log(data);
         })
       });
    });

  </script>
  </body>
</html>

控制器： @responsebody标签将数据以json的格式返回给浏览器

  //返回的要是一个json格式的数据
    @RequestMapping("/getJson")
    @ResponseBody
    public User getJson(){
        User user = new User();
        user.setUsername("aaa");
        user.setAge(18);
        return user;
    }

表单序列化

需求：有一form表单，需将form表单中的内容以Ajax请求方式发送给服务器

<form id="myform">
  user:<input type="text" name="username"><br>
  age:<input type="text" name="age" ><br>
  爱好:<input type="checkbox" name="hobby" value="篮球"> 篮球
  <input type="checkbox" name="hobby" value="乒乓球"> 乒乓球
  <input type="checkbox" name="hobby" value="足球"> 足球
</form>
<input type="button" id="formbtn" value="发送form">

jquery只提供了简单的表单序列化，序列化后的表单内容如下：

$("#formbtn").click(function () {
            //获取表单当中所有的参数发送给服务器
            var serialize = $("#myform").serialize();
            console.log(serialize);
            //username=aaa&age=23&hobby=%E7%AF%AE%E7%90%83
            //期待格式{username:aaa,age:23}
     });

使用 JQuery插件Json序列化，使发送到服务器的形式为json格式

(function($){
          $.fn.serializeJson=function(){
              var serializeObj={};
              var array=this.serializeArray();
              var str=this.serialize();
              $(array).each(function(){
                  if(serializeObj[this.name]){
                      if($.isArray(serializeObj[this.name])){
                          serializeObj[this.name].push(this.value);
                      }else{
                          serializeObj[this.name]=[serializeObj[this.name],this.value];
                      }
                  }else{
                      serializeObj[this.name]=this.value;
                  }
              });
              return serializeObj;
          };
      })(jQuery);

再次向服务器发送Ajax请求可以看到Json序列化后的表单为：

  var serializeJson = $("#myform").serializeJson();
            console.log(serializeJson);
            //Object {username: "aaa", age: "23", hobby: "篮球"}

随后控制器接受浏览器发来的Ajax请求

 @RequestMapping("/formJson")
    @ResponseBody
    public String formJson(User user){
        System.out.println(user);
        return "success";
    }

随后出现的问题是：当只选择一个爱好选项时，服务器可以接收到请求，当选择两个及两个以上上，服务器500报错

原因分析：因为默认的 Content-Type:application/x-www-form-urlencoded，而当选择两个及两个以上时，就不是key-value形式，而是key-array形式，因此服务器无法识别数据，服务器500报错

解决方法：

1.将表单序列化后的数据转换成json字符串

data:JSON.stringify(serializeJson),

2.设置请求头中的contentType：'application/json'

$(function () {
        $("#formbtn").click(function () {
            //获取表单当中所有的参数发送给服务器
            //使用序列化转json插件
            var serializeJson = $("#myform").serializeJson();
            console.log(serializeJson);
            console.log(JSON.stringify(serializeJson));
            //Object {username: "aaa", age: "23", hobby: "篮球"}

            $.ajax({
                type:"post",
                url:"${pageContext.request.contextPath}/formJson",
                data:JSON.stringify(serializeJson),
                dataType:'json',
                contentType:'application/json',
                success:function (data) {
                    console.log(data)
                }
            });

        });

    });

serializeJson和 JSON.stringify(serializeJson),的格式对比：

数据由key-array转成了key-value格式

注意：dataType 如果表明为json，则返回值一定要是json格式的，否则就会报错。要不去掉datatype，要不改变控制器中返回值的类型。

@requestBody

和@responseBody相反，@requestBody用来接收Json数据的请求

默认情况下，我们发送的content-Type是：application/x-www-form-urlencoded 可以直接用@requestParam接受参数

如果不是content-Type不是application/x-www-form-urlencoded 而是 application/json等（除过application/x-www-form-urlencoded 其他类型）需要用requestBody接受

 @RequestMapping("/formJson")
    @ResponseBody
    public String formJson(@RequestBody User user){
        System.out.println(user);
        return "success";
    }

在一般发送的Ajax请求中，如果有checkbox，要手动进行设置，因为 checkb一般都是数组，选择两个及两个以上的选项没有问题，但选择一个选项时，CheckBox的类型就成是string类型，因此要对它进行手动设置，当时string类型时，将它转成数组类型。

$(function () {
        $("#formbtn").click(function () {
            //获取表单当中所有的参数发送给服务器
            //使用序列化转json插件
            var serializeJson = $("#myform").serializeJson();
            console.log(serializeJson);
            console.log(JSON.stringify(serializeJson));
            //Object {username: "aaa", age: "23", hobby: "篮球"}
            if( typeof serializeJson.hobby=="string"){
                serializeJson.hobby = new Array(serializeJson.hobby);
            }

            $.ajax({
                type:"post",
                url:"${pageContext.request.contextPath}/formJson",
                data:JSON.stringify(serializeJson),
                dataType:'json',
                contentType:'application/json',
                success:function (data) {
                    console.log(data)
                }
            });

        });

    });

requestBody还可以获取文件信息。

SpringMVC @ResponseBody与@RequestBody 及表单序列化

ResponseBody

表单序列化

数据由key-array转成了key-value格式

@requestBody

猜你喜欢