jquery多个Ajax请求

时间:2011-09-15 13:18:52

标签: jquery ajax parallel-processing deferred

此代码段允许删除拖入框中的多个文件。文件读取器创建每个文件的blob,然后使用ajax rq将EACH文件发送到服务器:

$.each( e.dataTransfer.files, function(index, file){
    var fileReader = new FileReader();

    //..generate BLOB from file 


    fileReader.onloadend = (function(file) {                                
        return function(e) {                            
            uploadfilelist.append('<li>' + file.fileName + '</li>');
            //send every single file to server
            var destfoldername=CURRENTPATH;
            var uploadfilename=file.fileName;

            var fd = new FormData();
            fd.append("param1", destfoldername);
            fd.append("param2", uploadfilename);
            fd.append("param3", blob);

            $.ajax({
                type:"POST",
                url:"url",
                data:fd,
                contentType: false,
                processData: false,             
                beforeSend:function (xhr){ 
                    //custom headers
                },  
                success: function(data, textStatus, jqXHR){

                },
                complete: function(jqXHR){    
                    alert("State after complete: " + jqXHR.statusText);                 
                }           
            });
        };
    })(file);
    fileReader.readAsBinaryString(file);
}

问题: 接收到下一个blob时服务器内部崩溃而未处理前一个blob。

我找到另一篇帖子讨论这个:How to make all AJAX calls sequential? 使用async:false的“顺序”请求不是一个选项,它会阻止很多其他事情。

解决方案:??? 调用ajax forfile1,调用完成后,调用ajax for file2,...调用ajax for file -n

我真的想使用JQ Deferred(http://api.jquery.com/category/deferred-object/) 例如如下所述:http://api.jquery.com/jQuery.when/

$.when($.ajax(???how to refer to THIS ajax call).done(function(){
//call this ajax for the next file again or use $.ajax(code).then()?
});  

我真的很抱歉,但我不知道如何做对。

感谢您的任何建议! 小时。

2 个答案:

答案 0 :(得分:0)

队列插件有一个插件:

http://plugins.jquery.com/project/ajaxqueue

由John Resig亲自撰写。

答案 1 :(得分:0)

通过解决下一个承诺

,你当然可以在没有插件的情况下对它们进行排队
$.ajax(/*options*/)
.then(function(res) {
  // do something with result
  // call 2
  return $.ajax(/* options */);
})
.then(function(res) {
  // call 3
  return $.ajax(/* options */);
})  // and so on
.fail(function(err) {
  // catch any error from any ajax call
});

这几乎与嵌套回调相同,具有可读性和全部错误捕获的附加好处