您现在的位置是：网站首页 > 代码编程 > WEB前端WEB前端

【原】ajax使用formdata提交form表单，服务端接收不到数据

不忘初心 2019-07-05 围观() 评论() 点赞() 【WEB前端】

简介：上一篇文章中，我使用formdata的方式来实现ajax提交form表单，当时碰到了一个formdata二次处理的问题，虽然解决了，但后续又碰到了另外一个问题：“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表单，服务端接收不到数据