使用 javascript ajax 调用按顺序创建 html 表？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24059302/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Creating html table using javascript ajax calls in sequential order?
提问by user3231742
I am new to JavaScript. I am creating one table dynamically; I am facing a problem with the order of execution. I know JavaScript code won't execute sequentially, but what will be the work around?
我是 JavaScript 的新手。我正在动态创建一张表；我面临执行顺序的问题。我知道 JavaScript 代码不会按顺序执行，但是有什么解决办法呢？
First I will brief what I am trying to do.
首先，我将简要介绍我正在尝试做的事情。
1) loadList ()-> I will call this method on click of load data button
here I will fire AJAX request to get data
1) loadList ()-> 我将在这里点击加载数据按钮调用此方法我将触发 AJAX 请求以获取数据
2) using the result of above AJAX request, I am trying to create table rows
2) 使用上述 AJAX 请求的结果，我正在尝试创建表行
3) few table rows tdhaving combo box, whose value to be filled using another AJAX call, passing the rowObjectvalue
3)td具有组合框的几个表行，其值将使用另一个 AJAX 调用填充，传递rowObject值
Below is my code:
下面是我的代码：
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;
}
Here row is creating first, after that control is going to createCombomethods. Because of this I am not getting combo boxes in td.
这里的行首先创建，然后控制转到createCombo方法。因此，我没有在td.
I want to create combobox based on first result of AJAX call; using the first result I need to call other 2 AJAX calls and populate them in the tdcombobox.
我想根据 AJAX 调用的第一个结果创建组合框；使用第一个结果，我需要调用其他 2 个 AJAX 调用并将它们填充到td组合框中。
回答by Arpit Jain
Please use below code block, this might be solve your problem. Your requirement need synchronous execution of methods, for this you need to use callback structure. below is the code :
请使用下面的代码块，这可能会解决您的问题。您的需求需要方法的同步执行，为此您需要使用回调结构。下面是代码：
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);
});
}
thanks
谢谢
回答by Smeegs
There are several problems that need to be addressed.
有几个问题需要解决。
First, the return value from an ajax callback won't go anywhere.
首先，ajax 回调的返回值不会去任何地方。
This line
这条线
var combo1 = createCombo1(rowObject);
var combo1 = createCombo1(rowObject);
Will set combo1 to undefinedevery single time. Because createCombo1()doesn't return anything. The anonymous function inside of createCombo1()is what returns the value your looking for, but in this case you can't use that return value.
将undefined每次都设置combo1 。因为createCombo1()不返回任何东西。其中的匿名函数createCombo1()返回您要查找的值，但在这种情况下，您不能使用该返回值。
What I recommend for createCombo1()and createCombo2()is to save the return value to a global variable or maybe even an array, so you can access them when they are done.
我推荐createCombo1()，并createCombo2()要返回值保存到一个全局变量或甚至一个数组，这样你就可以当他们完成访问它们。
Which brings me to the next problem...how do you know when they are done?
这让我想到了下一个问题……你怎么知道它们什么时候完成？
jQuery has something called a deferred object. Which allows you to chain multiple callbacks to one function. There is a similar SO question that addresses how to use this using When().
jQuery 有一种叫做延迟对象的东西。这允许您将多个回调链接到一个函数。有一个类似的 SO 问题解决了如何使用When().
There is still a lot to do on your end, but hopefully this will point you in the right direction.
您还有很多事情要做，但希望这会为您指明正确的方向。
