【Bug】ajax请求@RequestBody注解的方法时报错

最新推荐文章于 2024-08-19 00:59:44 发布

不务正业的野猴子

最新推荐文章于 2024-08-19 00:59:44 发布

阅读量1.8k

点赞数

分类专栏：【Bug】

本文链接：https://blog.csdn.net/quan20111992/article/details/80863325

版权

【Bug】专栏收录该内容

32 篇文章 0 订阅

订阅专栏

本文介绍了在遇到使用Ajax请求时，如果服务端方法参数使用了@RequestBody注解导致的错误，如何进行排查和解决。关键点包括前端参数需转换为字符串，请求方式设置为POST，数据格式设为JSON，以及服务端用对象接收所有参数。同时，补充了2019年4月12日关于前端表单数据获取的正确写法。

摘要由CSDN通过智能技术生成

服务端代码

    @ResponseBody
    @RequestMapping(value = "/userAdd.json")
    public Map<String,String> userAdd(@RequestBody UserInfo userInfo) {
        Map<String, String> result = new HashMap<String, String>();
        result.put("resultCode","0001");
        return result;
    }

前端代码(错误代码)

 var requestMethod = 'post';
 var variable = $("form").serialize();
 $.ajax({
     url : 'UserController/userAdd.json',
     type: requestMethod,
     async: false,
     data : variable,
     dataType: 'json',
     success  : function(data){
         console.log(data);
     },
     error: function(XMLHttpRequest, textStatus, errorThrown){
         console.log(XMLHttpRequest.status);
         console.log(XMLHttpRequest.readyState);
         console.log(textStatus);
         console.log(errorThrown.responseText);
     }
 });

前端代码(正确代码)

var requestMethod = 'post';
var variable = JSON.stringify(data.field);
$.ajax({
    url : 'UserController/userAdd.json',
    type: requestMethod,
    async: false,
    data : variable,
    dataType: 'json',
    contentType: 'application/json;charset=UTF-8',
    success  : function(data){
        console.log(data);
    },
    error: function(XMLHttpRequest, textStatus, errorThrown){
        console.log(XMLHttpRequest.status);
        console.log(XMLHttpRequest.readyState);
        console.log(textStatus);
        console.log(errorThrown.responseText);
    }
});

当服务端方法参数使用了@RequestBody时：
1、前端参数需要是json字符串
2、请求方式为post
3、客户端发送数据格式为application/json
4、服务端方法参数需使用对象接收(即使前端只有一个参数)
5、前端所有参数需都放入json字符串中，不允许有多种格式存在

表单序列化

title=gonzo&password=gonzo&city=2&sex=%E5%A5%B3&desc=

json字符串

{"title":"gonzo","password":"gonzo","city":"2","sex":"女","desc":""}

这里写图片描述

2019-04-12 补充
前端代码(正确代码) 中第二行的data.field是项目中取表单数据的写法，其数据格式如下

var data = new Object();
var field = {};
field.title="gonzo";
field.password="gonzo";
field.city="2";
field.sex="女";
field.desc="";
data.field = field;