Ajax 提交json格式数据给后台

最新推荐文章于 2025-03-12 20:13:36 发布

小伙阿k

最新推荐文章于 2025-03-12 20:13:36 发布

阅读量4.4k

点赞数 1

分类专栏：框架文章标签： ajax java js

本文链接：https://blog.youkuaiyun.com/qq_41995896/article/details/109177611

版权

框架专栏收录该内容

24 篇文章

订阅专栏

本文详细介绍了如何使用Ajax提交JSON格式数据给后端，并重点讲解了前端设置contentType属性以及后端如何接收和响应JSON数据。通过具体的代码示例，阐述了在前后端分离项目中JSON数据传输的重要性。

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

Ajax 提交json格式数据

在实际的开发当中，尤其是在前后端分离的项目中，传输数据都是以json格式进行传输的，所以对于json格式数据的情求和响应的学习十分重要。

1、前端提交json格式数据

前端一般是通过 Ajax 进行表单提交

设置ajax的contentType属性contentType:application/json
data属性提交的数据就需要是json格式的 data:'{"did":"","dname":"'+dname+'"}'
具体实现代码：

<script type="text/javascript">
        $(function () {
                $('#btn_add').click(function () {
                   //js发送请求
                   var dname= $('#add_dname').val()
                    console.info(dname)
                    $.ajax({
                        url:'${path}/deptv3/add',
                        async:true,
                        data:'{"did":"","dname":"'+dname+'"}',
                        type:"post",
                        contentType:"application/json;charset=UTF-8",
                        success:function (result) {    //js接收结果
                            if(200==result.code){
                                alert(result.msg) //js更新页面
                                //刷新列表
                            }
                        },
                        error:function () {
                            alert('服务问题，请求失败')
                        }
                    });
                })
        })
    </script>

2、后端接收json格式数据并响应json格式数据

1）设置@RequestMapper注解中的参数consume=application/json
2）在传入参数的位置使用@RequestBody注解，将接收的json格式数据转换为Object
3）在映射方法上添加@ResponsBody注解
在使用这些注解的时候需要在application Context.xml文件中配置注解驱动<mvc:annotation-driven/>
在pom.xml文件中加入jackson依赖
代码

@Controller
@RequestMapping("/deptv3")
public class DepartmentV3Controller {
    private static final Logger l = LoggerFactory.getLogger(DepartmentV3Controller.class);
    @Autowired
    IDepartmentService iDepartmentService;

    @RequestMapping(path="/addUI",method = RequestMethod.GET)
    public String addUI(){
        return "add_dept";
    }
    @RequestMapping(path="/add",method = RequestMethod.POST,consumes = "application/json")
    public @ResponseBody  Object add(@RequestBody  Department dept){//{did:0,dname:IOS}
        l.info("add dept="+dept);
        try {
            iDepartmentService.saveDepartment(dept);
            return Result.init(200,"添加成功",null);
        } catch (Exception e) {
            e.printStackTrace();
        }
        return Result.init(-200,"添加失败",null);
    }
}