按順序使用javascript ajax調用創建html表？

Question

我是JavaScript新手。我正在動態創建一個表;我面臨着執行順序的問題。我知道JavaScript代碼不會按順序執行，但是解決方法是什麼？

首先我會簡要介紹一下我正在嘗試做的事情。

1）loadList() - >我會叫上載數據按鈕，點擊這個方法 在這裏，我將會觸發AJAX請求獲得使用上述AJAX請求的結果數據

2），我想創建表有組合框，其值使用另一個AJAX調用填寫，傳遞rowObject值

以下行

3）數錶行td是我的代碼：

var loadList = function(){ 

//ajax call 
$.ajax({ 
    url:"tworows.json", 
    type: "GET", 
    dataType : "json" 
}) 
.done(function(data, textStatus, jqXHR){ 
    generateTable(data); 
}); 
}; 


function generateTable(data){ 

$("#gridTable").empty(); 

//create table header 
var headertr = $("<tr><th>col1 </th><th>col 2</th><th>col 3</th><th>col 4</th><th>col 5</th><th>col 6</th><th>col 7</th></tr>"); 

//get table id from jquery 
var tableelement = $("#gridTable"); 

//add header row to table 
tableelement.append(headertr); 


for(var i=0; i< data.links.id.length; i++){ 
     tableelement.append(createRow(data.links.id[i])); 
}  

} 

function createRow(rowObject){ 

//used to create combo box 1 based row 1 value 
var combo1 = createCombo1(rowObject); 

//used to create combo box 2 based row 1 value 
var combo2 = createCombo2(rowObject); 


var trElement = "<tr>"+ 
     "<td><input type='text' name='col1name' value='"+rowObject.Number+"' onblur='handleInput(this)'/></td>"+ 
     "<td><input type='text' name='col3name' value='"+rowObject.name+"'/></td>"+ 
     "<td><input type='text' name='col3name' value='"+rowObject.quantity+"'/></td>"+ 
     "<td>"+combo1+"</td>"+ 
     "<td>"+combo2+"</td>"+ 
     "<td><button>Del</button></td>" + 
     "<td><button>Add</button></td></tr>"; 

return trElement; 
} 

function createCombo1(rowObject){ 

var comboList = []; 
    //call ajax to get combo value 
    $.ajax({ 
     url:"combo1data.json", 
     type: "GET", 
     dataType : "json", 
     async : false 
    }) 
    .done(function(data, textStatus, jqXHR){ 
     comboList = data.links.id; 
    });  

    var cmb1 = "<select name='cmb1' onchange='handlecmb1Change(this)'>"; 
    for(var i=0;i < comboList.length; i++){ 
    cmb1 +="<option value='"+comboList[i].id+"'>"+comboList[i].name+"</option>"; 
    } 

    cmb1 += "</select>"; 

    return cmb1; 
} 

function createCombo2(rowObject){ 
var comboList = []; 
//call ajax to get combo value 
$.ajax({ 
    url:"combo2data.json", 
    type: "GET", 
    dataType : "json", 
    async : false 
}) 
.done(function(data, textStatus, jqXHR){ 
    comboList = data.links.id; 
}); 
var cmb2 = "<select onchange='handlecmb2Change(this)'>"; 

for(var i=0;i < comboList.length; i++){ 
    cmb2 +="<option value='"+comboList[i].id+"'>"+comboList[i].name+" </option>"; 
    } 

cmb2 += "</select>"; 
return cmb2; 
} 

這裏的行正在創建第一個，之後，控制是去createCombo方法。正因爲如此，我沒有在td中獲得組合框。

我想根據AJAX調用的第一個結果創建組合框;使用第一個結果，我需要調用其他2個AJAX調用並將它們填充到td組合框中。

Answer 1

請使用下面的代碼塊，這可能會解決您的問題。你的需求需要同步執行方法，爲此你需要使用回調結構。下面 是代碼：

var loadList = function(){ 

//ajax call 
$.ajax({ 
    url:"tworows.json", 
    type: "GET", 
    dataType : "json" 
}) 
.done(function(data, textStatus, jqXHR){ 
    generateTable(data); 
}); 
}; 


function generateTable(data){ 

$("#gridTable").empty(); 

//create table header 
var headertr = $("<tr><th>col1 </th><th>col 2</th><th>col 3</th><th>col 4</th><th>col 5</th><th>col 6</th><th>col 7</th></tr>"); 

//get table id from jquery 
var tableelement = $("#gridTable"); 

//add header row to table 
tableelement.append(headertr); 


for(var i=0; i< data.links.id.length; i++){ 
     tableelement.append(createRow(data.links.id[i])); 
}  

} 

function createRow(rowObject){ 

var trElement = "<tr>"; 

//used to create combo box 1 based row 1 value 
var combo1 = createCombo1(rowObject,function(response){ 
    //used to create combo box 2 based row 1 value 
    var combo2 = createCombo2(rowObject,function(result){ 
     trElement+= "<td><input type='text' name='col1name' value='"+rowObject.Number+"' onblur='handleInput(this)'/></td>"; 
     trElement+="<td><input type='text' name='col3name' value='"+rowObject.name+"'/></td>"; 
     trElement+="<td><input type='text' name='col3name' value='"+rowObject.quantity+"'/></td>"; 
     trElement+="<td>"+response+"</td>"; 
     trElement+="<td>"+result+"</td>"; 
     trElement+="<td><button>Del</button></td>"; 
     trElement+="<td><button>Add</button></td></tr>"; 
    }); 
}); 

return trElement; 
} 

function createCombo1(rowObject,callback){ 

var comboList = []; 
    //call ajax to get combo value 
    $.ajax({ 
     url:"combo1data.json", 
     type: "GET", 
     dataType : "json" 
    }) 
    .done(function(data, textStatus, jqXHR){ 
     comboList = data.links.id; 
     var cmb1 = "<select name='cmb1' onchange='handlecmb1Change(this)'>"; 
     for(var i=0;i < comboList.length; i++){ 
     cmb1 +="<option value='"+comboList.id+"'>"+comboList.val+"</option>"; 
     } 

     cmb1 += "</select>"; 
     return callback(cmb1); 
    });  
} 

function createCombo2(rowObject,callback){ 

var comboList = []; 
    //call ajax to get combo value 
    $.ajax({ 
     url:"combo2data.json", 
     type: "GET", 
     dataType : "json" 
    }) 
    .done(function(data, textStatus, jqXHR){ 
     comboList = data.links.id; 


     var cmb2 = "<select name='cmb1' onchange='handlecmb1Change(this)'>"; 
     for(var i=0;i < comboList.length; i++){ 
     cmb1 +="<option value='"+comboList.id+"'>"+comboList.val+"</option>"; 
     } 

     cmb2 += "</select>"; 
     return callback(cmb2); 
    });  

} 

感謝

Answer 2

有幾個問題需要解決。

首先，ajax回調的返回值不會去任何地方。

此行

var combo1 = createCombo1(rowObject);

將設置COMBO1到每一次undefined。因爲createCombo1()不會返回任何內容。 createCombo1()內部的匿名函數是返回您要查找的值的函數，但在這種情況下，您不能使用該返回值。

我推薦的createCombo1()和createCombo2()是將返回值保存到一個全局變量或甚至一個數組，以便您可以在完成時訪問它們。

這給我帶來了下一個問題......你怎麼知道它們何時完成？

jQuery有一些東西叫做deferred object。它允許您將多個回調鏈接到一個函數。有一個類似的SO問題解決如何使用這個使用When()。

Here is the question

還有很多事情要做你的結束，但希望這將指向你在正確的方向。