@requestBody注解常用来处理content-type不是默认的application/x-www-form-urlcoded编码的内容，

比如说：application/json或者是application/xml等。一般情况下来说常用其来处理application/json类型。

jQuery序列化表单的方法总结

现在这里贴出案例中静态的html网页内容：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<form id="test_form">

    账户：<input type="text" name="username" value="user"/><br>

    密码：<input type="password" name="password" value="123"><br>

    <input type="button" value="序列化为(Key=Value)格式Url"onclick="testJquerySerializeUrl()" id="serializeUrl"/>&nbsp;&nbsp;

    <input type="button" value="序列化为json" onclick="testJquerySerializeArray()" id="serializeJson"/>&nbsp;&nbsp;

    <input type="button" value="手动拼接为json" onclick="testAutoSetJsonData()" id="autoSetJson"/>

</form>

</body>

知识点一：表单序列化serialize()

不需要使用@RequestBody

方法介绍：

作用：序列表单内容为字符串。

参数： 无

Content-Type：application/x-www-form-urlencoded; charset=UTF-8

默认返回类型，不需要使用@RequestBody

案例代码：

<script>

    function testJquerySerializeUrl() {

		alert($("#test_form").serialize());

        console.log($("#test_form").serialize());

        $.ajax({

            url: "/SerializeUrl",

            type: "post",

            data: $("#test_form").serialize()

        })

    }

</script>

后台代码：

@RequestMapping("/SerializeUrl")

public void hello( user user){

   System.out.println(user);

}

测试结果：

总结: ajax使用默认Content-Type：application/x-www-form-urlencoded; charset=UTF-8

1.我们看到输出的结果为表单项中的各表单元素的name和value值

2.格式是以 KEY:VALUE 参数的形式

需要使用@RequestBody

作用：序列表单内容为字符串。

参数： 无

Content-Type：contentType: "application/json"

需要使用@RequestBody

案例：

<script>

    function testJquerySerializeUrl() {

		alert($("#test_form").serialize());

        console.log($("#test_form").serialize());

        $.ajax({

            url: "/SerializeUrl",

            type: "post",

            data: $("#test_form").serialize(),

    		contentType: "application/json"

        })

    }

</script>

有上图可以看到请求体的值为:username=user&password=123,此时后台使用无法接收到传回的值的。需要重新组装表单序列化Url为Json串,然后通过JSON.stringify()将javascript值转成json字符串

<script>

    function testJquerySerializeUrl() {

        alert(JSON.stringify($("#test_form").serialize()));

        console.log($("#test_form").serialize());

        //重新组装表单序列化Url为Json串

        var jsonData = {}

        var serializeStr = $("#test_form").serialize();

        var array = serializeStr.split("&");

        $(array).each(function (i) {

            jsonData[array[i].split("=")[0]] = array[i].split("=")[1];

        })

        console.log(jsonData);

        $.ajax({

            url: "/SerializeUrl",

            type: "post",

            data: JSON.stringify(jsonData),

            contentType: "application/json"

        })

    }

</script>

后台代码：添加@RequestBody

@RequestMapping("/SerializeUrl")

public void SerializeUrl(@RequestBody user user){

    System.out.println(user);

}

总结：ajax使用Content-Type：contentType: "application/json"

1.我们看到输出的结果为表单项中的各表单元素的name和value值

2.格式是以url参数的形式，第一个参数前面没有&符号

知识点二：表单序列化serializeArray()方法

不需要使用@RequestBody

方法介绍：

作用：序列化表格元素 (类似 '.serialize()' 方法) 返回 JSON 数据结构数据。

参数：无

返回值：返回的是JSON对象而非JSON字符串

Content-Type：`application/x-www-form-urlencoded; charset=UTF-8

案例：

<script>

    function testJquerySerializeArray() {

        alert($("#test_form").serializeArray());

        console.log($("#test_form").serializeArray());

        $.ajax({

            url: "/SerializeArray",

            type: "post",

            data: $("#test_form").serializeArray(),

        })

    }

</script>

后台代码：

@RequestMapping("/SerializeArray")

public void SerializeArray(user user){

    System.out.println(user);

}

测试结果：

总结: ajax使用默认Content-Type：application/x-www-form-urlencoded; charset=UTF-8

1.我们看到输出的结果为Json

[

{name: 'firstname', value: 'Hello'},

{name: 'lastname', value: 'World'},

{name: 'alias'}, // this one was empty

]

需要使用@RequestBody

案例：

<script>

    function testJquerySerializeArray() {

        alert($("#test_form").serializeArray());

        console.log($("#test_form").serializeArray());

        var jsonData = {};

        var serializeArray = $("#test_form").serializeArray();

        // 先转换成{"id": ["12","14"], "name": ["aaa","bbb"], "pwd":["pwd1","pwd2"]}这种形式

        $(serializeArray).each(function () {

            if (jsonData[this.name]) {

                if ($.isArray(jsonData[this.name])) {

                    jsonData[this.name].push(this.value);

                } else {

                    jsonData[this.name] = [jsonData[this.name], this.value];

                }

            } else {

                jsonData[this.name] = this.value;

            }

        });

        console.log(jsonData);

        $.ajax({

            url: "/SerializeArray",

            type: "post",

            data: JSON.stringify(jsonData),

            contentType: "application/json"

        })

    }

</script>

后台代码：添加@RequestBody

@RequestMapping("/SerializeArray")

public void SerializeArray(@RequestBody user user){

    System.out.println(user);

}

测试结果：

有上图可以看到console.log打印出来为一个json对象，此时使用@RequestBody后台无法接收。需要重新组装表单序列化json对象为Json串,然后通过JSON.stringify()将javascript值转成json字符串

总结：

1.我们看到调用方法返回的是json对象

2.可是用JSON.stringify()方法将json对象转化为json字符串

知识点三：拼接json串

不需要使用@RequestBody

案例：

<script>

    function testAutoSetJsonData() {

        $.ajax({

            url:"/autoSetJsonData",

            type:"post",

            data:{

                username:"user",

                password:"123"

            }

        })

    }

</script>

后台代码：

@RequestMapping("/autoSetJsonData")

public void autoSetJsonData(user user){

    System.out.println(user);

}

测试结果：

需要使用@RequestBody

案例：

<script>

    function testAutoSetJsonData() {

        $.ajax({

            url:"/autoSetJsonData",

            type:"post",

            data:JSON.stringify({

                username:"user",

                password:"123"

            }),

            contentType: "application/json"

        })

    }

</script>

后台代码：添加@RequestBody

@RequestMapping("/autoSetJsonData")

public void autoSetJsonData(@RequestBody user user){

    System.out.println(user);

}

测试结果：

总结

拿好小本子记笔记了

@RequestBody接收的是一个Json对象的字符串，而不是一个Json对象/javascript值（重点）。

所以为什么在使用@RequestBody接收contentType："application/json"的数据时,后台一直显示为null，是需要将data数据使用JSON.stringify()转换成json字符串,当然也可以使用字符串拼接的方式。

扩展：@RequestParam 用于默认 Content-Type：application/x-www-form-urlencoded; charset=UTF-8,接收Url指定的参数

相关博客连接：

jQuery序列化表单的方法总结（serialize()、serializeArray()）

Github测试代码：

https://github.com/YoCiyy/springboot-helloworld

@RequestBody与serialize()、serializeArray()、拼接Json 妙用总结的更多相关文章

  1. jQuery序列化表单 serialize() serializeArray()

    1.serialize()方法 描述:序列化表单内容为字符串,用于Ajax请求. 格式:var data = $(form).serialize(); 2.serializeArray()方法 描述: ...

  2. jQuery序列化表单 serialize() serializeArray()（非常重要）

    https://m.2cto.com/kf/201412/361303.html 2014-12-15 1.serialize()方法 描述:序列化表单内容为字符串,用于Ajax请求. 格式:var ...

  3. IOS开发之——使用SBJson拼接Json字符串

    SBJson包的下载地址在上一篇文章中. 能够使用NSDictionary中的键值对来拼接Json数据,很方便,也能够进行嵌套,直接上代码: //開始拼接Json字符串 NSDictionary *d ...

  4. 在SpringMVC中使用@RequestBody和@ResponseBody注解处理json时，报出HTTP Status 415的解决方案

    我在使用SpringMVC的@RequestBody和@ResponseBody注解处理JSON数据的时候,总是出现415的错误,说是不支持所提交数据格式,我在页面中使用了JQuery的AJAX来发出 ...

  5. Atitit php序列化 php的serialize序列化和json序列化

    Atitit php序列化 php的serialize序列化和json序列化 PHP 对不同类型的数据用不同的字母进行标示,Yahoo 开发网站提供的Using Serialized PHP with ...

  6. @RequestBody接收的是一个json对象

    一直以为在SpringMVC环境中,@RequestBody接收的是一个json对象,调试代码时没有成功,后来才发现,其实 @RequestBody接收的是一个json字符串,而不是一个json对象. ...

  7. jQuery 序列化表单 serialize() serializeArray()

    1.serialize()方法 格式:var data = $("form").serialize(); 功能:将表单内容序列化成一个字符串. 这样在ajax提交表单数据时,就不用 ...

  8. jQuery 序列化表单数据 serialize() serializeArray()

    1.serialize()方法 格式:var data = $("form").serialize(); 功能:将表单内容序列化成一个字符串. 这样在ajax提交表单数据时,就不用 ...

  9. jQuery使用serialize(),serializeArray()方法取得表单数据+字符串和对象类型两种表单提交的方法

    原始form表单值获取方式(手动): $.ajax({ type: "POST", url: "ajax.php", data: "Name=摘取天上 ...

随机推荐

  1. 洛谷P5211 [ZJOI2017]字符串（线段树+乱搞）

    题面 传送门 题解 为什么大佬们全都是乱搞的--莫非这就是传说中的暴力能进队,乱搞能AC-- 似乎有位大佬能有纯暴力+玄学优化\(AC\)(不算上\(uoj\)的\(Hack\)数据的话--这要是放到 ...

  2. Ionic2实战——按模块划分app 创建多module

    http://www.jianshu.com/p/d94324b722af 背景 用ionic2开发过一两个小功能的朋友都会发现,每新建一个页面都需要在\src\app\app.module.ts中添 ...

  3. PyQt5（4）——菜单栏（使用外部exe）

    图像化建立菜单栏: ① 双击输入名称 就可以喽 如何添加工具栏呢: 新建一个快捷工具,拖到快捷栏,出现红色的小竖线. 至此 就完成了菜单栏和快捷方式的建立. 补充: python   如何调用外部的e ...

  4. 【智能算法】粒子群算法（Particle Swarm Optimization）超详细解析+入门代码实例讲解

    喜欢的话可以扫码关注我们的公众号哦,更多精彩尽在微信公众号[程序猿声] 01 算法起源 粒子群优化算法(PSO)是一种进化计算技术(evolutionary computation),1995 年由E ...

  5. 欧拉筛（线性筛） & 洛谷 P3383 【模板】线性筛素数

    嗯.... 埃氏筛和欧拉筛的思想都是相似的: 如果一个数是素数,那么它的所有倍数都不是素数.... 这里主要介绍一下欧拉筛的思路:(欧拉筛的复杂度大约在O(n)左右... 定义一个prime数组,这个 ...

  6. python全栈开发学习_day2_语言种类及变量

    一.编程语言的分类及python相对其他语言的优势 1)三大语言种类及细分 1.机器语言(低级语言):直接用计算能够理解的二进制进行编写,直接控制计算机硬件. 优点:执行效率高. 缺点:开发效率低,跨 ...

  7. [LnOI2019]加特林轮盘赌

    Luogu5249 轮流开枪打一个环上的人 , 每次\(p\)的概率打死 , \(p\)始终相同 , 从第\(1\)个人开始 , 求第\(k\)个人成为唯一幸存者的概率 \(19.3.30\) 官方题 ...

  8. vue中nextTick的使用（转载）

    转载自:https://www.cnblogs.com/chaoyuehedy/p/8985425.html 简介 vue是非常流行的框架,他结合了angular和react的优点,从而形成了一个轻量 ...

  9. Python 实现flatten功能

    from collections import Iterable def flatten(items): for x in items: if isinstance(x, Iterable) and ...

  10. 性能测试工具Jmeter12-Jmeter连接配置带跳板机（SSH）的mysql服务器

    准备工作: 1.下载mysql-connector-java-5.1.13-bin.jar包,然后放在jmeter安装目录lib下 2.重新打开jmeter即可 要完成以上两步才能进行后续操作 要点: ...