AJAX:jQuery ajax api vs. Javascript xhr

时间:2013-03-20 04:34:21

标签: javascript jquery ajax html5

tl; dr:虽然我相信它们,但下面的两个脚本并不完全相同。为什么呢?

我会给你一些关于这篇文章的背景资料。我正在尝试构建一个图像上传表单,使AJAX请求创建一个动态上传页面。由于我了解了HTML5的File API,我试图在AJAX请求中使用它。我在MDN上通过一些很好的例子构建了我自己的实例。我的工作脚本使用直接JS来表示AJAX请求,但我尝试构建一个使用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;

});        

2 个答案:

答案 0 :(得分:1)

the documentation中发布时,$.post接受普通对象或字符串作为其数据参数。您无法使用FormData

  

数据
     键入:PlainObject或String
     使用请求发送到服务器的普通对象或字符串。

答案 1 :(得分:1)

jQuery在$.param(和其他人)的第二个参数上调用$.post,如果它不是字符串。 fd不是字符串,但$.param上的fd无效。如果您要使用原始fd值,则必须在ajax设置中将processData设置为falsehttp://api.jquery.com/jQuery.ajax/

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