首页   >   代码编程   >   WEB前端

ajax使用formdata提交form表单,服务端接收不到数据

上一篇文章中,我使用formdata的方式来实现ajax提交form表单,当时碰到了一个formdata二次处理的问题,虽然解决了,但后续又碰到了另外一个问题:“ajax使用formdata提交form表单之后,后台服务无法获取到值”,今天来就这个问题给大家分析一下。

前端代码:

var formData = new FormData();// 声明表单对象,括号中可以传递一个form对象
formData.append("username",  "积微成著");
formData.append("password",  "sssssss");
$.ajax({
    url: '/test/content-type',
    type: "post",
    dataType: "json",
    data: formData,
    processData: false,
    // contentType: false, // 一定要加上这一句来配合formdata二进制处理
    success: function(data) {
        console.log(data);
    },
    error: function(XMLHttpRequest, textStatus, errorThrown) {
        alert('系统异常');
    }
});

后端代码:

@RequestMapping(value = "/test/content-type")
@ResponseBody
public String testContentType(HttpServletRequest request, String username, String password) {
    System.out.println(request.getHeader("Content-Type"));
    System.out.println(username);
    System.out.println(password);
    return "success";
}

运行截图:

ajax使用formdata提交form表单,服务端接收不到数据

大家看到,后端直接没有获取到值,打开浏览器的console看一下:

ajax使用formdata提交form表单,服务端接收不到数据

so,大家明白了吗?

因为formdata里面,提交表单的格式是二进制方式,而普通表单提交时的contentType是application/x-www-form-urlencoded,所以,content-type和传值格式不一致,就会导致后端接收不到值,改成false之后,contentType就会是multipart/form-data,此时就是符合二进制流的content-type了,再使用二进制流的方式提交表单,就不会有问题。

将上面js代码中的那行注释放开,问题就能得到解决,效果如下:

ajax使用formdata提交form表单,服务端接收不到数据

QQ群: 686430774  /  718410762

站长Q: 1347384268

如果文章有帮到你,可以考虑请博主喝杯咖啡!

分享到:

欢迎分享本文,转载请注明出处!

作者:不忘初心

发布时间:2019-07-05

永久地址:https://www.jiweichengzhu.com/article/6afa5e88d12d4dbea1749cbbd829e975

评论