解决Ajax发送DELETE请求时后台无法接收到参数的问题（Restful风格）

最新推荐文章于 2022-11-01 09:30:51 发布

原创最新推荐文章于 2022-11-01 09:30:51 发布 · 3.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#Ajax的DELETE请求

JS 同时被 2 个专栏收录

5 篇文章

订阅专栏

layui

4 篇文章

订阅专栏

本文探讨了AJAX发送DELETE请求时触发两次请求的原因，即预检请求（OPTIONS）和实际DELETE请求，并提供了两种解决方案。一种是在前端直接使用DELETE方法并设置正确的内容类型，另一种是将请求改为POST并在数据中包含_method参数。同时，文章还展示了如何在后端适配这些变化。

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

在AJAX发送DELETE请求的时候，会触发两次请求。
在这里插入图片描述

首先在js代码中是没调用两次的，所以并不是自己多调用了一次：
在这里插入图片描述

点开第一个请求可以看到是OPTIONS请求：
在这里插入图片描述

第二个请求才是DELETE请求：

在这里插入图片描述

这就导致了后台无法接收数据的问题。

就查到了这篇文章：
https://www.cnblogs.com/liaojie970/p/8526750.html

第一种解决办法：（亲自测试成功）
前端：

$.ajax({
  url: '/cyberspace/vrv/event/delete/1002?startTime="2018-03-07 11:39:27"&userId=123456',
   type: "delete",
   contentType: "application/json",
   dataType: "json",
   success: function (msg) {
       console.log(msg);
   }
});

后端：

@DeleteMapping("/vrv/event/delete/{eventId}")

第二种解决办法：（我没有测试）
前端：

$.ajax({
            url: '/cyberspace/vrv/event/delete/1002',
            type: 'POST',
            data: {
                startTime: "2018-03-07 11:39:27",
                userId: 123456,
                _method: 'DELETE'
            },
            success: function (msg) {
                console.log(msg);
            }
        });

后端：

@RequestMapping(value = "/vrv/event/delete/{eventId}", method = RequestMethod.DELETE)

我解决的办法

前端原来的代码：
在这里插入图片描述

解决之后的:
在这里插入图片描述

后端代码：

使用@PathVariable("managerIdStr")来绑定要接收的数据

  @ApiOperation("删除管理员信息")
    @DeleteMapping("/delManagerUserById/{managerIdStr}")
    @ResponseBody
    public String delManagerUserById(@PathVariable("managerIdStr") String managerIdStr){

        System.out.println("要删除的ID："+managerIdStr);
        if (managerIdStr==null || managerIdStr=="")
            return ResultUtils.ResultFail("参数不能为空");

        int s = managerUserService.delManagerUserById(managerIdStr);

        if(s<0)
            return ResultUtils.ResultFail("删除失败了");


        return new ResultUtils().ResultSuccess(null).toString();
    }