AJAX：jQuery ajax api 与 Javascript xhr答案

【问题标题】：AJAX: jQuery ajax api vs. Javascript xhrAJAX：jQuery ajax api 与 Javascript xhr
【发布时间】：2013-03-20 04:34:20
【问题描述】：

tl;dr：下面的两个脚本并不相同，尽管我相信它们是相同的。为什么？

我会给你一些关于这篇文章的背景信息。我正在尝试构建一个图像上传表单，该表单发出 AJAX 请求以创建动态上传页面。因为我了解了 HTML5 的 File API，所以我试图在 AJAX 请求中使用它。我按照MDN 上的一些很好的示例构建了自己的实例。我的工作脚本对 AJAX 请求使用直接的 JS，但我尝试构建一个使用 jQuery 的版本。我的问题是，为什么 jQuery 版本不能正常工作？据我所知，它是从 JS xhr 风格的 AJAX 到 jQuery 风格的 AJAX 的直接移植。（本题的目的是对jQuery的AJAX API有一个学术上的了解；由于我已经有了一个可以工作的脚本，所以我的实际需求已经满足了）

这是有效的 Javascript AJAX 请求：

$("form").submit(function(){

    var file = $("input:file").get(0).files[0];
    var xhr = new XMLHttpRequest();
    var fd = new FormData();

    xhr.open("POST", "/upload", true);
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            alert(xhr.responseText);
        }
    };
    fd.append('img', file);
    xhr.send(fd);

    return false;

});

还有非工作的 jQuery 版本：

$("form").submit(function(){

    var fd = new FormData();
    var file = $("input:file").get(0).files[0];
    fd.append('img', file);

    $.post("/upload", fd, function(data){
        alert(data);
    });

    return false;

});

【问题讨论】：

您的控制台有任何错误吗？

标签： javascript jquery ajax html

【解决方案1】：

正如the documentation 中所发布的，$.post 接受普通对象或字符串作为其数据参数。你不能使用FormData。

数据
类型：PlainObject 或 String
随请求发送到服务器的普通对象或字符串。

【讨论】：

我如何将 FormData 对象转换为 PlainObject 或 String？

【解决方案2】：

jQuery 调用 $.param 的第二个参数到 $.post（和其他），如果它不是一个字符串。 fd 不是字符串，但fd 上的$.param 无效。如果要使用原始的fd 值，则必须在ajax 设置中将processData 设置为false：http://api.jquery.com/jQuery.ajax/

$.ajax({
    ur: "/upload",
    data: fd,
    processData: false,
}).done(function (data) {
    console.log(data);
});

【讨论】：