2016-08-04 67 views
0

我在JavaScript中創建一個下拉列表,我通過Ajax和JSON加載數據,此刻我的代碼循環通過一組部門並運行到ajax調用在每次迭代中。AJAX - 等待數據追加循環之前下一個

我的問題是,我的數據似乎是以隨機順序追加,它的可能是它的負載順序無論哪個負載最快。

我希望能夠遍歷我的Ajax調用,並按照我聲明的順序(針對每個部門)追加數據。 這是可以做到的事情嗎?

這裏是我的代碼:

//-- Ajax -- 
var departments = ['Accounts', 'Commercial', 'Installation', 'Production', 'Sales']; 
var i; 

for (i = 0; i < departments.length; i++) { 
    $.ajax({ 
     type: "POST", 
     url: "Default.aspx/EmployeesDropDown", 
     data: '{X: "' + departments[i] + '"}', 
     contentType: "application/json; charset=utf-8", 
     dataType: "text json", 
     async: true, 
     success: createdropdown, 
     failure: function() { 
      alert("FAIL!"); 
     } 
    }); 
} 


//-- Creates dropdown -- 
function createdropdown(data) { 
...appends all the data to my drop down list... 
    } 

任何幫助或建議表示讚賞,感謝你提前。

編輯:這個問題是從相關的不同,因爲我需要能夠循環通過字符串數組,而不是隻是基於數字迭代。

+0

採用javascript承諾 – madalinivascu

+0

或只是做一個Ajax調用 – madalinivascu

+0

似乎這種重複http://stackoverflow.com/questions/22978843/ how to make-for-loop-wait-until-async-call-was-success-before-to-continue – rick

回答

0

如果要加載的部門,他們出現在departments排列的順序,你可以加載它們一個接一個,等待每一個Ajax請求完成,直到你開始下一個請求。

下面是一個例子:

var departments = ['Accounts', 'Commercial', 'Installation', 'Production', 'Sales']; 
 
var i = 0; 
 

 
function reqDep(department) { 
 

 
    /* 
 
    Since i can't use ajax here let's use a promise. 
 
    */ 
 

 
    var p = new Promise(function(res, rej) { 
 
    setTimeout(function() { 
 
     res(department) 
 
    }, 1000) 
 
    }) 
 
    return p; 
 

 
    // This is what you would actually do. 
 

 
    /* 
 
    var data = '{X: "' + department + '"}' 
 
    return $.ajax({ 
 
    type: "POST", 
 
    url: "Default.aspx/EmployeesDropDown", 
 
    data: data, 
 
    contentType: "application/json; charset=utf-8", 
 
    dataType: "text json", 
 
    }); 
 
    */ 
 
} 
 

 
function initDepartments(index) { 
 
    reqDep(departments[index]) 
 
    // Here you would use `.done(function(data...` 
 
    // I am using `.then(function(data...` 
 
    // because of the promise. 
 
    .then(function(data) { 
 
    console.log(data) 
 
    if(i < departments.length) { 
 
     initDepartments(i) 
 
    } 
 
    }) 
 
    i++; 
 
}; 
 

 
initDepartments(i)

相關問題