【Jquery】ajax @requestBody

本文详细介绍了使用jQuery的$.ajax方法进行POST请求的具体实现,包括设置请求类型、内容类型、URL、数据序列化及错误处理等。同时展示了后端如何通过@ResponseBody注解接收并处理JSON格式的数据。

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

前端:
$.ajax({
    type: "POST",
    contentType: "application/json;charset=UTF-8",
    url: REQUEST_URL.SAVE_ITEM_DETAILS,
    async: false,
    data: JSON.stringify(itemDetails.itemDetailList), //JSON对象需要转成JSON字符串 eg '{"id":"1","name":"猪八戒"}'
    success: function (retResult) {
        alert(retResult.retMsg);
    },
    error: function (XMLHttpRequest, textStatus, errorThrown) {
        alert("保存失败!");
    }
});

后台:
   @ResponseBody
    @RequestMapping("/saveItemDetails")
    public RetResult saveItemDetails(@RequestBody ItemDetail[] itemDetailList){ 
    //ItemDetail中的属性不能少与JSON的属性,按照JSON属性映射赋值转换 (eg: private String id;private String name; 比如少了name属性,则接受不到)
    //todo save }

 

 

转载于:https://www.cnblogs.com/itplay/p/10467634.html

<think>好的,我现在需要帮助用户解决关于在Spring Boot中使用@RequestBody接收Ajax提交的表单数据的问题。用户已经提供了一些相关的引用资料,我需要仔细分析这些信息,并结合自己的知识来给出正确的示例和解释。 首先,用户的问题是如何在使用@RequestBody的情况下通过Ajax提交表单数据。根据引用[2]和[^4],@RequestBody通常用于处理非表单编码的数据,比如JSON或XML。而表单默认的Content-Type是application/x-www-form-urlencoded,这时候通常使用@RequestParam而不是@RequestBody。但用户可能希望强制使用@RequestBody来接收表单数据,这可能需要调整前端发送的数据格式。 接下来,我需要查看引用中的示例。引用[1]中的后端代码使用@RequestBody接收了一个User对象,前端发送的是JSON数据。而引用[3]中的GET请求使用@RequestParam接收参数。但用户的需求是提交表单数据,即application/x-www-form-urlencoded,但用@RequestBody接收,这可能会有问题,因为默认情况下Spring不会将表单数据转换为对象,除非数据格式是JSON或其他支持的格式。 根据引用[4],当使用表单提交时,数据默认是键值对形式,而@RequestBody需要的是请求体中的数据,比如JSON。因此,正确的做法可能是前端将表单数据序列化为JSON字符串,并设置Content-Type为application/json,这样后端才能用@RequestBody正确接收。 所以,解决方案应该是前端使用Ajax提交时,将表单数据转换为JSON格式,并设置正确的Content-Type。后端保持使用@RequestBody来映射到对应的对象。例如,前端使用jQuery的$.ajax方法,将表单数据转换为JSON对象,然后发送POST请求。后端则定义一个POJO来接收这些参数。 需要验证这个思路是否正确。根据引用[2],@RequestBody处理的是请求体的数据,而如果前端发送的是JSON字符串,即使数据是表单字段,后端也能正确解析。因此,用户的示例应该包括前端将表单数据转换为JSON,并设置Content-Type为application/json,然后后端用@RequestBody接收。 最后,需要给出具体的代码示例,包括前端Ajax和后端Controller,并解释每个步骤的作用,确保用户能够理解如何实现这一过程。</think>在Spring Boot中,使用`@RequestBody`接收Ajax提交的表单数据需要特殊的处理,因为表单默认的`application/x-www-form-urlencoded`编码格式与`@RequestBody`的预期数据格式不同。以下是具体实现步骤和示例: --- ### 一、后端Controller实现 ```java @PostMapping(value = "/submitForm", produces = "application/json") public Map<String, String> handleForm(@RequestBody UserForm userForm) { Map<String, String> result = new HashMap<>(); result.put("msg", "接收到用户名: " + userForm.getUsername() + ",年龄: " + userForm.getAge()); return result; } // 定义与表单字段对应的POJO类 public class UserForm { private String username; private int age; // 必须包含getter/setter } ``` **关键点说明** 1. `@RequestBody`注解要求前端发送**JSON格式数据**,而非传统表单编码格式[^2] 2. POJO类的字段名需与前端传递的JSON键名**严格一致** --- ### 二、前端Ajax实现(jQuery示例) ```javascript $.ajax({ url: '/submitForm', type: 'POST', contentType: 'application/json', // 必须指定JSON格式[^2] data: JSON.stringify({ username: $('#username').val(), // 假设有id=username的表单字段 age: parseInt($('#age').val()) // 假设有id=age的表单字段 }), success: function(response) { console.log('响应结果:', response.msg); } }); ``` **关键点说明** 1. 必须使用`JSON.stringify()`将表单数据转换为JSON字符串 2. 必须设置`contentType: 'application/json'` --- ### 三、与传统表单提交的区别 | 方式 | 编码类型 | 后端接收方式 | 数据格式 | |----------------------|----------------------------|------------------|--------------| | 传统表单提交 | application/x-www-form-urlencoded | @RequestParam | 键值对 | | 本方案 | application/json | @RequestBody | JSON对象 | --- ### 四、常见问题解决 1. **400错误** - 检查JSON字段名是否与POJO字段名一致 - 确认是否遗漏`JSON.stringify()`转换 - 验证数值类型字段是否正确转换(如将字符串转为int) 2. **415错误** - 确保设置了`contentType: 'application/json'` ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值