浅谈x-www-form-urlencoded与json的区别

浅谈x-www-form-urlencoded与json的区别

      • x-www-form-urlencoded
      • json

最近刚学习了ajax的这两种编码格式,于是便记录一下

x-www-form-urlencoded

application/x-www-from-urlencoded:这是默认的编码格式,它是以传输键值对的形式传参的
例如:name=张三&age=18
贴上一点代码有助于比较:

$(function () {
        $("#bt").click(function () {
            $.ajax({
                url: "web/test6",
                //编码类型  默认	x-www-form-urlencoded
                //数据
                data:{"name":"王五","age":"30"},
                //返回数据类型
                dataType: "json",
                //请求类型
                type: "POST",
                //处理函数
                success: function (data) {
                    //date服务器的json数据
                    alert(data.name);
                }
            })
        })
    });
@RequestMapping("/test6")
    @ResponseBody
    public User test6(User user){
        System.out.println(user);
        return user;
    }

data里的格式不用使用’'包裹,否则会获得null(可与下面代码作比较)

json

application/json:他传输的是json格式的数据
例如{“name”:“张三”,“age”:“18”}
json格式代码有两种写法:
1.

    $(function () {
        $("#bt").click(function () {
            $.ajax({
                url: "web/test6",
                //编码类型  默认	x-www-form-urlencoded
                //使用json格式编码
                contentType: 'application/json;charset=UTF-8',
                //数据
                data:'{"name":"王五","age":"30"}',
                //返回数据类型
                dataType: "json",
                //请求类型
                type: "POST",
                //处理函数
                success: function (data) {
                    //date服务器的json数据
                    alert(data.name);
                }
            })
        })
    });

这里的data里的格式得加上’’,否则会出错
2.

	var user = {"name": "朱八", "age": "40"};
    $(function () {
        $("#bt").click(function () {
            $.ajax({
                url: "web/test6",
                //编码类型  默认	x-www-form-urlencoded
                contentType: 'application/json;charset=UTF-8',
                //json对象需要 json转化
                data: JSON.stringify(user),
                //返回数据类型
                dataType: "json",
                //请求类型
                type: "POST",
                //处理函数
                success: function (data) {
                    //date服务器的json数据
                    alert(data.name);
                }
            })
        })
    });

两种格式的后端代码都是一样的,加上@RequestBody即可

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

最后分析一下两边代码的差异

  • x-www-form-urlencoded格式代码不需要写contentType,而json格式代码需要加上contentType: ‘application/json;charset=UTF-8’
  • x-www-form-urlencoded格式传输后端不需要添加@RequestBody注解,而json格式需要
  • x-www-form-urlencoded格式传输的时候data里的数据不要用’‘包裹,否则会得到null,而json使用data去传输的时候恰恰相反,需要使用’'包裹

小白笔记,多多指教

你可能感兴趣的:(浅谈x-www-form-urlencoded与json的区别)