Ajax 发送 PUT 和 DELETE 请求 (转载)
Ajax 使用 restful 服务发送 put 和 delete 请求时直接传参会出现问题
一, 采用 POST + _method:delete/put + filter 的方法
Ajax 发送 put 和 delete 请求时, 需要传递参数, 如果参数在 url 地址栏上, 则可以正常使用,
如果在 data: 中需要传递参数,(浏览器会使用表单提交的方式进行提交) 则需要注意此时应作如下修改:
1. 请求方式设置为 type:"post",
2. 在 data 中加入 __method:"DELETE", 或者 _method:"PUT" 参数 ,
data:{_method:"DELETE", id:issueId,userId:userId},
3. 后台的 controller 仍为对应的 DELETE 请求
- @RequestMapping(value="/answer/{answerId}",method=RequestMethod.DELETE)
- public ResponseResult deleteAnswer(@PathVariable("answerId")int answerId,Issue issue){
- // 可自动封装成对象时, 可直接采用对象参数
- }
4. 需要配置相应的 filter(如果使用 Spring Boot 则会自动配置)
- <filter>
- <filter-name>HiddenHttpMethodFilter</filter-name>
- <filter-class>org.springframework.web.filter.HiddenHttpMethodFilter</filter-class>
- </filter>
- <filter-mapping>
- <filter-name>HiddenHttpMethodFilter</filter-name>
- <!-- 备注, 这边的名称必须和配置'springmvc'的 servlet 名称一样 -->
- <servlet-name>springmvc</servlet-name>
- </filter-mapping>
Ajax 代码如下 :
- var r=confirm("确认删除该?");
- if(r){
- $.Ajax({
- url:"http://localhost:8888/answer/"+answerId,
- type:"POST",
- data:{_method:"DELETE", id:issueId,userId:userId},
- dataType:"json",
- success:function(result){
- }
- },
- });
二, 仍然使用 PUT DELETE 请求
1. 仍然使用 put 和 delete 请求, 并且需要传递参数的时候 data 需要设置为 JSON 字符串
- var jsonstr = {"id":issueId,"userId":userId};
- var r=confirm("确认删除该回答?");
- if(r){
- $.Ajax({
- url:"http://localhost:8885/answer/"+answerId,
- type:"DELETE",
- contentType:"application/json",// 设置请求参数类型为 JSON 字符串
- data:JSON.stringify(jsonstr),// 将 JSON 对象转换成 JSON 字符串发送
- dataType:"json",
- success:function(result){
- },
- });
- }
2. 客户端需要使用 @RequestBody 标注
- @RequestMapping(value="/answer/{answerId}",method=RequestMethod.DELETE)
- public ResponseResult deleteAnswer(@PathVariable("answerId")int answerId,@RequestBody Issue issue){
- }
3. 最后如果前端报错 提示 Request header field Content-Type is not allowed by Access-Control-Allow-Headers in preflight response , 可参考如下解决方案
https://stackoverflow.com/questions/12409600/error-request-header-field-content-type-is-not-allowed-by-access-control-allow
可以写一个过滤器
- @WebFilter(servletNames={"dispatcherServlet"})// 可配置对应的请求 servlet 此处使用 springMVC
- public class AjaxFilter implements Filter{
- public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)
- throws IOException, ServletException {
- HttpServletResponse httpServletResponse=(HttpServletResponse) response;
- httpServletResponse.setHeader("Access-Control-Allow-Origin", "*");
- httpServletResponse.setHeader("Access-Control-Allow-Methods","GET,POST,DELETE,PUT");
- httpServletResponse.setHeader("Access-Control-Allow-Headers","Origin,X-Requested-With,Content-Type,Accept");
- chain.doFilter(request, response);
- }
- }
来源: http://www.bubuko.com/infodetail-2889741.html