使用javascript ajax调用按顺序创建html表？

Question

我是JavaScript新手。 我正在动态创建一个表； 我面临执行顺序的问题。 我知道JavaScript代码不会按顺序执行，但是解决方法是什么？

首先，我将简要介绍我想做的事情。

1） loadList () ->我将在单击“加载数据”按钮时调用此方法，此处将触发AJAX请求以获取数据

2）使用上述AJAX请求的结果，我正在尝试创建表行

3）少数具有组合框的表行td ，使用另一个AJAX调用填充其值，并传递rowObject值

下面是我的代码：

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方法之后，这里首先创建了row。 因此，我没有在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有一个称为延迟对象的东西。 这使您可以将多个回调链接到一个函数。 有一个类似的SO问题，该问题解决了如何使用When()来使用它。

这是问题

您仍有很多工作要做，但希望这会为您指明正确的方向。