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

简介: 解决Ajax发送DELETE请求时后台无法接收到参数的问题(Restful风格)

在AJAX发送DELETE请求的时候,会触发两次请求。

首先在js代码中是没调用两次的,所以并不是自己多调用了一次:

点开第一个请求可以看到是OPTIONS请求:

第二个请求才是DELETE请求:

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

就查到了这篇文章:

第一种解决办法:(亲自测试成功)

前端:

$.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();
    }
目录
相关文章
|
17天前
|
XML 前端开发 JavaScript
|
1月前
|
JSON JavaScript 前端开发
《进阶篇第6章:vue中的ajax》包括回顾发送ajax请求方式、vue-cli脚手架配置代理服务器、vue-resource
《进阶篇第6章:vue中的ajax》包括回顾发送ajax请求方式、vue-cli脚手架配置代理服务器、vue-resource
58 22
|
1月前
|
前端开发 JavaScript
回顾前端页面发送ajax请求方式
回顾前端页面发送ajax请求方式
38 18
|
1月前
|
前端开发 JavaScript Java
第6章:Vue中的ajax(包含:回顾发送ajax请求方式、vue-cli脚手架配置代理服务器)
第6章:Vue中的ajax(包含:回顾发送ajax请求方式、vue-cli脚手架配置代理服务器)
60 4
|
1月前
|
前端开发 JavaScript 数据处理
JQuery 拦截请求 | Ajax 请求拦截
【10月更文挑战第4天】
94 1
|
2月前
|
JSON JavaScript 前端开发
Jquery常用操作汇总,dom操作,ajax请求
本文汇总了jQuery的一些常用操作,包括DOM元素的选择、添加、移除,表单操作,以及如何使用jQuery发送Ajax请求,涵盖了GET、POST请求和文件上传等常见场景。
|
2月前
|
JSON 资源调度 JavaScript
Vue框架中Ajax请求的实现方式:使用axios库或fetch API
选择 `axios`还是 `fetch`取决于项目需求和个人偏好。`axios`提供了更丰富的API和更灵活的错误处理方式,适用于需要复杂请求配置的场景。而 `fetch`作为现代浏览器的原生API,使用起来更为简洁,但在旧浏览器兼容性和某些高级特性上可能略显不足。无论选择哪种方式,它们都能有效地在Vue应用中实现Ajax请求的功能。
42 4
|
XML 前端开发 JavaScript
什么是Ajax和jquery
什么是Ajax和jquery
87 0
|
6月前
|
JSON 前端开发 Java
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
151 0