AJAX：jQuery ajax api vs Javascript xhr

tl; dr：儘管我相信他們是，但以下兩個腳本並不完全相同。爲什麼？AJAX：jQuery ajax api vs Javascript xhr

我會給你一些關於這篇文章的背景資料。我正在嘗試構建一個圖像上傳表單，使得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; 

});

來源

2013-03-20 jayhendren

在控制檯中的任何錯誤？ – basarat 2013-03-20 04:38:05

作爲張貼在the documentation，$.post接受或者是一個普通對象或字符串作爲其數據的參數。您不能使用FormData。

數據
類型：PlainObject或字符串
發送到與請求的服務器A普通對象或字符串。

來源

2013-03-20 04:38:44 meagar

然後我會如何將FormData對象轉換爲PlainObject或String？ – jayhendren 2013-03-20 04:50:28

的jQuery上的第二個參數$.post（及其他）調用$.param，如果它不是一個字符串。 fd不是字符串，但$.param對fd無效。如果要使用原始fd值，你必須設置processData到false在阿賈克斯設置：http://api.jquery.com/jQuery.ajax/

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

來源

2013-03-20 04:44:03

AJAX：jQuery ajax api vs Javascript xhr

回答

相關問題