JQuery 的 Ajax 提交方式与 Springboot 后台取值方式的对应写法示例

最新推荐文章于 2024-06-24 11:05:01 发布

Fantacy.

最新推荐文章于 2024-06-24 11:05:01 发布

阅读量547

点赞数

CC 4.0 BY-SA版权

分类专栏： ⦿ 开发技术

本文链接：https://blog.youkuaiyun.com/Little_Stars/article/details/103735552

⦿ 开发技术专栏收录该内容

96 篇文章

订阅专栏

本文示例了使用JQuery的Ajax进行POST请求，传递JSON数据到Springboot后端的各种取值方式。包括通过@RequestParam获取单一参数，通过@RequestBody获取整个DTO对象，以及RESTful接口直接在URL中传递参数。

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

前端：POST + JSON ；后端取参：@RequestParam(value = "pageSize") Integer pageSize ....

    /**
     * 初始化表格数据
     */
    function initTable(){
        var jsonObject = {"pageNumber":1,"pageSize":5,"sortName":"userId","sortOrder":"asc"};
        $.ajax({
            type:'POST',// post时必须用'application/x-www-form-urlencoded'，模拟表单提交，而不是body提交
            url:'/users/ulist',
            async : false,// 必须同步！！
            dataType: "json",
            data: jsonObject, // 后台用 “@RequestParam” 取参数值时，此处不要转化“JSON.stringify(jsonObject)”
            contentType: 'application/x-www-form-urlencoded', // 'application/x-www-form-urlencoded'，'application/json'
            success: function( rs ){
                layer.closeAll();
                console.log("表格初始化完成，总数据量："+rs.dataSize);
            },  
            error:function(){
                layer.closeAll();
            }
        });
    }

前端：POST+JSON ；后端取参：@RequestBody TestDto testDto ...

    /**
     * 提交登录请求
     * @param submitUrl 请求地址
     * @param jsonObject 请求参数，json对象
     */
    function logingAjax(submitUrl,jsonObject){
        $.ajax({
            type:'POST',
            url:submitUrl,
            async : false,// 必须同步！！
            dataType: "json",
            data: JSON.stringify(jsonObject),
            contentType: 'application/json',
            success: function( rs ){
                layer.closeAll();
                if( rs.status == "0" ){                    
                    window.location.href="/";
                }else{
                    loginAlert( rs.msg );                   
                }
            },  
            error:function(){
                layer.closeAll();
            }
        });
    }

前端：REST，直接URL方式(可带参数)，未带任何参数；

后端混合取参：

定义请求路径和方式：
@RequestMapping(value = "/api/test/{reportType}", method = RequestMethod.POST)

获取URL斜杠路径中的取参：
@PathVariable(value = "reportType") String reportType, 
获取URL疑问号后面的参数：
@RequestParam(value = Base.MID) String mid .....