如何从多个ajax调用中获取数据?

时间:2016-08-26 08:52:08

标签: jquery ajax

这里我从fetchbookAllNew()调用fetchBooks()方法,但是这个ajax加载器工作不正常。当fetchBooks被称为ajax加载器时,我想要显示的是直到我将得到的所有数据在.done函数中。

$scope.fetchBooks = function(){
        $(".loader").show();
        $.when(

                fetchbookAllNew("all"),
                fetchbookAllNew("epub"),
                fetchbookAllNew("collection"),
                fetchbookAllNew("video"),

              ).done(function(publishedAll, publishedEpub, publishedColl,publishedVideo){

                  $scope.allkitabooBooks = publishedAll;
                $scope.allEpubBooks =publishedEpub;
                $scope.allcollectionbooks = publishedColl;
                $scope.allvideosbooks = publishedVideo;

                $(".loader").fadeOut("slow");
              });


    };

    var fetchbookAllNew = function(status){
            var books = undefined;

             $.ajax({
                  url:'/booksList', // Dynamically uploads the files which is chosen.  
                  type: 'GET',

                  headers : {
                        'usertoken' : $rootScope.userDetails.userToken,
                        'status':status
                            },
                  cache: false,
                  async: false,
                  processData: false,           // Don't process the files
                  contentType:'application/json',   // Setting content type to "application/octet-stream"/"undefined" as jQuery will tell the server its not query string.

                  success: function (data) {
                      books=data;

                  },
                  error: function (data) {

                  }
              });
             return books;

        };

1 个答案:

答案 0 :(得分:1)

这应该这样做,你需要返回ajax承诺,而不是结果。 done()会为您解析结果。 More info

$scope.fetchBooks = function(){
        $(".loader").show();
        $.when(
                fetchbookAllNew("all"),
                fetchbookAllNew("epub"),
                fetchbookAllNew("collection"),
                fetchbookAllNew("video"),
              ).done(function(publishedAll, publishedEpub, publishedColl,publishedVideo){
                // Each argument is an array with the following 
                //                   structure: [ data, statusText, jqXHR ]
                //so [0] is data
                $scope.allkitabooBooks = publishedAll[0];
                $scope.allEpubBooks =publishedEpub.data[0];
                $scope.allcollectionbooks = publishedColl.data[0];
                $scope.allvideosbooks = publishedVideo.data[0];
                $(".loader").fadeOut("slow");
              });
    };

    var fetchbookAllNew = function(status){
             return $.ajax({
                  url:'/booksList', // Dynamically uploads the files which is chosen.  
                  type: 'GET',
                  headers : {
                        'usertoken' : $rootScope.userDetails.userToken,
                        'status':status
                            },
                  cache: false,
                  //async: false,//don't EVER do this
                  processData: false,           // Don't process the files
                  contentType:'application/json',   // Setting content type to "application/octet-stream"/"undefined" as jQuery will tell the server its not query string.   
              });
        };

永远不要使用ajax:false。它击败了承诺和ajax的对象。