Springboot的使用ajax发送PUT和DELETE实例

最新推荐文章于 2023-04-22 18:20:12 发布

一勺菠萝丶

最新推荐文章于 2023-04-22 18:20:12 发布

阅读量5.2k

点赞数 5

分类专栏： # SpringBoot

本文链接：https://blog.csdn.net/weixin_39973810/article/details/84650315

版权

SpringBoot 专栏收录该内容

47 篇文章 1 订阅

订阅专栏

ajax使用restful服务发送put 和 delete 请求时直接传参会出现问题

一，采用POST + _method:delete/put + filter 的方法

ajax发送put 和 delete 请求时,需要传递参数，如果参数在url地址栏上，则可以正常使用(最下面有这个实例)
如果在 data：中需要传递参数，（浏览器会使用表单提交的方式进行提交）则需要注意此时应作如下修改：

请求方式设置为 type：“post”,
在data中加入 _method:“DELETE”,或者 _method:“PUT” 参数

$(function () {
	 var id = '123456789';
        var codeNumber = '9999999';
        //ajax 提交
        $("#ajaxBtn").click(function () {
            $.ajax({
                url: "http://localhost:8080/code",
                type: "POST",
                data:{_method:"DELETE", id:id,codeNumber:codeNumber},
                dataType:"json",
                success: function (res) {

                }
            })
        })
    })

后台controller仍为对应的DELETE请求


    @RequestMapping(value = "code", method = RequestMethod.DELETE)
    public void delCode(String id, String codeNumber) {

        log.info("id=============" + id);
        log.info("codName=============" + codeNumber);
    }

请求效果
在这里插入图片描述

二, 仍然使用PUT DELETE请求

1.仍然使用put和delete请求，并且需要传递参数的时候data需要设置为json字符串

   $(function () {
        var id = '123456789';
        var codeNumber = '9999999';
        var jsonStr = {id: id, codeNumber: codeNumber}
        $.ajax({
            url: "http://localhost:8080/code",
            type: "DELETE",
            contentType: "application/json",//设置请求参数类型为json字符串
            data: JSON.stringify(jsonStr),//将json对象转换成json字符串发送
            dataType: "json",
            success: function (result) {
            
            }
        });
    })

后台controller需要使用@RequestBody标注

    @RequestMapping(value = "code", method = RequestMethod.DELETE)
    public void delCode(@RequestBody Code code) { //Code为实体

        log.info("id=============" + code.getId());
        log.info("codName=============" + code.getCodeNumber());
    }

如果有跨越问题需要在方法上面加上注解@CrossOrigin
请求效果
在这里插入图片描述

2. 仍然使用put和delete请求，还有一种办法就是将参数在url地址栏上,接收按正常接收(这种方法不能使用data传值,如果使用data传值,后台会接收不到) (建议使用delete请求的时候使用该方法)

$(function () {
        var id = '123456789';
        var codeNumber = '9999999';
        //ajax 提交
        $("#ajaxBtn").click(function () {
            $.ajax({
                url: "http://localhost:8080/code?id="+id+"&codeNumber"+codeNumber,
                type: "DELETE",
                dataType: "json",
                success: function (res) {
                    alert(1);
                    console.log(res);
                }
            })
        })
    })

后台controller正常接收

@RequestMapping(value = "code", method = RequestMethod.DELETE)
    public void delCode(String id,String codeNumber) {

        log.info("id=============" + id);
        log.info("codName=============" + codeNumber);
    }

请求效果
在这里插入图片描述