通过Ajax进行POST提交JSON类型的数据到SpringMVC Controller的方法

最新推荐文章于 2020-10-31 20:29:10 发布

转载最新推荐文章于 2020-10-31 20:29:10 发布 · 1.5k 阅读

文章标签：

#java #JSON #POST #ajax

java 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了如何使用Ajax通过POST方式提交JSON数据，并展示了具体的JavaScript代码示例。同时提供了Java Controller的实现方法，包括如何解析传入的JSON数据并进行响应。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

所做项目中用到POST提交JSON类型的字符串数据给controller，搜了一些博客，转载一篇还不错的博客：

js代码：

[javascript]view plain copy
function postSimpleData() {  
        $.ajax({  
            type: "POST",  
            url: "Service/SimpleData",  
            contentType: "application/json", //必须有  
            dataType: "json", //表示返回值类型，不必须  
            data: JSON.stringify({ 'foo': 'foovalue', 'bar': 'barvalue' }),  //相当于 //data: "{'str1':'foovalue', 'str2':'barvalue'}",  
            success: function (jsonResult) {  
                alert(jsonResult);  
            }  
        });  
    }  
    function login(){  
    $.ajax({  
        url: "Service/login",  
        type: "POST",  
        contentType: "application/json",  
        dataType: "json",  
        data: JSON.stringify({  
            MachineIP:"127.0.0.1",  
            AppTag:"4",  
            RequestInfo:{  
                StaffCode:"",  
                Password:"",  
                StaffCard:"01411"  
            },  
        }),  
        async: true,  
        success: function(data) {  
            var ss = JSON.stringify(data);  
            $("#result").val(ss);  
            console.log(ss);  
        }  
    });  
    }  
    function postEmployees() {  
        $.ajax({  
            type: "POST",  
            url: "Service/Employees",  
            contentType: "application/json",  
            dataType: "json",  
            data: JSON.stringify({                "Employees": [  
                                    { "firstName": "Bill", "lastName": "Gates" },  
                                    { "firstName": "George", "lastName": "Bush" },  
                                    { "firstName": "Thomas", "lastName": "Carter" }  
                                 ]  
  
            }),  
            success: function (jsonResult) {  
                alert(jsonResult);  
            }  
        });  
    }  

JAVA Controller代码：

[java]view plain copy
@RequestMapping(value = "/SimpleData", method = RequestMethod.POST)  
    @ResponseBody  
    public ActionResult SimpleData(string foo, string bar) {  
        return Json("SimpleData", JsonRequestBehavior.AllowGet);  
    }  
  
    @RequestMapping(value = "/login", method = RequestMethod.POST)  
    @ResponseBody  
    public ResponseProtocolMap login(@RequestBody JSONObject requestJson, HttpServletRequest request) {  
        ResponseProtocolMap responseProtocolMap = null;  
        String machineIP = RequestJsonUtils.getMachineIP(requestJson);  
        String appTag = RequestJsonUtils.getAppTag(requestJson);  
        JSONObject requestInfo = RequestJsonUtils.getRequestInfo(requestJson);  
        if (requestInfo == null) {  
            responseProtocolMap = new ResponseProtocolMap("-1", "参数错误");  
        } else {  
            String staffCode = RequestJsonUtils.getValueByKey(requestInfo, "StaffCode");  
            String password = RequestJsonUtils.getValueByKey(requestInfo, "Password");  
            String staffCard = RequestJsonUtils.getValueByKey(requestInfo, "StaffCard");  
            responseProtocolMap = sysLoginService.login(staffCode, password, staffCard, appTag, request);  
        }  
        return responseProtocolMap;  
    }  
  
    @RequestMapping(value = "/Employees", method = RequestMethod.POST)  
    @ResponseBody  
    public ActionResult Employees(List<Employee> Employees) {  
        return Json("Employees", JsonRequestBehavior.AllowGet);  
    }  

[java]view plain copy
public class Employee{  
    public string FirstName { get; set; }  
    public string LastName { get; set; }  
}  

值得注意的有2点：

1）Ajax 选项中

[javascript]view plain copy
contentType: "application/json"  

这一条必须写，表明request的数据类型是json。

而

[javascript]view plain copy
dataType: "json"  

这一条表示返回值的类型，不是必须的，且依据返回值类型而定。

2）选项中

[javascript]view plain copy
data: JSON.stringify({ 'foo': 'foovalue', 'bar': 'barvalue' })  

很多时候我们将数据写作：

[javascript]view plain copy
{ 'foo': 'foovalue', 'bar': 'barvalue' }  

这样会导致错误，因为js会默认将这个json对象放到表单数据中，故而导致controller接收不到。

有两种办法处理：第一种方式是用JSON.stringify()函数，其中JSON被Ecmascript5定义为全局对象。

第二种方式是直接用双引号包裹起来，比如data: "{'str1':'foovalue', 'str2':'barvalue'}"。

转载地址：http://blog.youkuaiyun.com/lsy0903/article/details/53199395