有关Ajax、axios的put提交,使用data传输数据后端接收不到值

        因为采用了REST风格,所以一些地方不得不用PUT、DELET这两种提交方式,但是实际操作的时候可能会出现,后端的数据为null的情况。

一、我的解决方法是直接把变量放到url上,成为路径变量。如果你的变量比较多,建议前端先组合成json格式,然后后端接收的时候声明一个list变量接收。这个使用路径变量的方法我自己试过没有问题。

前端代码:

axios

axios.put("/users"+id).then(res=>{
            console.log(res)
            if (res.data.code === 1) {
                a();
            } else {
                alert(res.data.msg)
            }
        }).catch(()=>{
            alert("后端接口异常")
        })

 ajax

//let jsonStr = {"id": id};//数量多的时候可以这样
$.ajax({
            url: "/users/"+id,
            type: "PUT",
            // contentType: "application/json",//设置请求参数类型为json字符串
            // data: JSON.stringify(jsonStr),
            // dataType: "json",
            success(res) {
                // alert(data);
                // location.go(0);
                if (res.data.code === 1) {
                    a();
                } else {
                    alert(res.data.msg)
                }
            },
            error() {
                alert("后端接口异常");
            }
        });

后端代码:

/**
     * 修改员工账号状态
     * @param id 员工id
     * @return 自定义状态
     */
    @PutMapping("/{id}")
    public R<String> updateByStatus(@PathVariable String id){
//        System.out.println("user = " + user);
//        Integer id = user.getId();
        System.out.println("id = " + id);
        int i = 0;
        try {
            i = Integer.parseInt(id);
        } catch (NumberFormatException e) {
            e.printStackTrace();
            return R.err("id转化异常");
        }
        System.out.println(i);
        boolean b = serviceImp.updateByStatus(i);
        if (b){
            return R.success("修改成功");
        }
        return R.err("失败");
    }

二、在网上查找资料的时候看见了别人的一些方法,我自己全部测试了一遍,发现还是不能解决问题,不排除他们的问题跟我不一样所以我这里没起作用。

        第一种:采用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>

        我的就是spring boot但是,测试了一遍还是无法解决


        第二种:仍然使用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){

},

});
}

客户端需要使用@RequestBody标注
@RequestMapping(value="/answer/{answerId}",method=RequestMethod.DELETE)
public ResponseResult deleteAnswer(@PathVariable("answerId")int answerId,@RequestBody Issue issue){

}

最后如果前端报错 提示 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);      
    }

}

        这种方法我也试了,还是没用

原文链接:https://www.bbsmax.com/A/amd0L4AWdg/

相关文章

学习编程是顺着互联网的发展潮流,是一件好事。新手如何学习...
IT行业是什么工作做什么?IT行业的工作有:产品策划类、页面...
女生学Java好就业吗?女生适合学Java编程吗?目前有不少女生...
Can’t connect to local MySQL server through socket \'/v...
oracle基本命令 一、登录操作 1.管理员登录 # 管理员登录 ...
一、背景 因为项目中需要通北京网络,所以需要连vpn,但是服...