我正在尝试循环使用 ajax 调用 3 个具有相同命名约定和结构(但数据略有不同)的不同 json 文件。自从我在论坛 (jQuery ajax success callback function definition) 中阅读 Alnitak 的回复以来，我一直在使用延迟对象而不是成功选项，这样我的 ajax 处理和回调处理就可以分离。下面是我的代码:
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=ISO-8859-1" />
<title>Stuff</title>
<script src="jquery-1.9.1.min.js" type="text/javascript"></script>
</head>
<body>
<script Language="JavaScript">
var myData = [];
var myURL = ["ticker1.json","ticker2.json","ticker3.json"]; //New Array for my URLs
function getData(m) {
return $.ajax({
url : myURL[m], //<<<---Want to loop through this array
type : 'GET',
dataType: 'json'
});
}
function handleData(data){
for (var i=0; i<data.test.msgOne.length; i++){
myData[i] = data.test.msgOne[i];
}
};
for (var j=0; j<3; j++){
console.log(j); //<<---First console statement
var ajaxCall = getData(j).done(handleData);
$.when(ajaxCall).done(function(){ //wait until the ajax call is done before writing
console.log(j); //<<---Second console statement
for (var k=0; k<3; k++){
document.write(myData[k])
document.write('<br><br>');
}
});
}
</script>
</body>
</html>
我的代码包含一个名为 getData 的函数，该函数执行 ajax 调用，然后是一个名为 handleData 的函数，该函数简单地循环遍历来自 ajax 调用的 json 文件中的数据，并将数据存储在数组 myData 中。然后 for 循环尝试将数组 myData 的数据输出到屏幕。但是，问题是我只从屏幕上输出的第一个 json 文件中获取数据，而不是按顺序获取所有三个数据。
所以我所做的是在 for 循环中输入两个 console.log 语句:一个在 ajax 调用之前，一个在 ajax 调用完成之后。第一个 console.log 按预期依次输出 0、1、2，第二个给出了 3，这是意想不到的。所以我假设在计数器完成之前 ajax 调用没有返回。我用下面给出的一些逻辑语句和 while 循环(是的，我知道代码无限期运行的危险)替换了 for 循环:
var j=0;
var whileFlag= new Boolean(1);
var ajaxFlag = new Boolean(1);
while (whileFlag) {
if (ajaxFlag > 0) {
ajaxFlag = 0;
console.log(j);
var ajaxCall = getData(j).done(handleData);
}
$.when(ajaxCall).done(function(){
console.log(j);
for (var k=0; k<3; k++){
document.write(myData[k])
document.write('<br><br>');
}
ajaxFlag = 1;
j++;
});
if (j>=3) {whileFlag = 0};
}
替换代码试图强制完成 ajax 调用，然后在移动到下一个 ajax 调用之前执行代码。好吧，最终结果是一个卡住的浏览器，这不是 bueno。有谁知道我如何能够将我的每个 json 文件的 myData 数组写入屏幕？任何帮助和建设性意见表示赞赏。此外，我需要保持 ajax 调用异步，因为我将来会使用 jsonp 数据类型。
附加问题:我认为浏览器挂起是因为ajax 没有返回调用，但问题是为什么？如果我选择不在第一个示例中实现 for 循环，而只是将 j 变量显式设置为 0、1 或 2，则所选 json 文件的数据打印输出正常，但如果我做的不止它只会打印第一个 json 文件中的数据集。就像不可能进行多个 ajax 调用或其他操作一样。任何见解和帮助表示赞赏。谢谢。
最佳答案
问题是你的 while 循环等同于...
while (whileFlag) {
if (ajaxFlag > 0) {
ajaxFlag = 0;
console.log(j);
var ajaxCall = getData(j).done(handleData);
}
// Some thrid party (asynch Handler) changes j
if (j>=3) {whileFlag = 0};
}
理想情况下，直到 Ajax 完成您的代码运行为
while (whileFlag) {
if (j>=3) {whileFlag = 0};
}
它挂起你的浏览器......
如果你真的想等待第二次 Ajax 调用直到第一次完成等等......
function getData(m) {
return $.ajax({
url : myURL[m], //<<<---Want to loop through this array
type : 'GET',
dataType: 'json',
myJ: m
});
}
function handleData(data){
for (var i=0; i<data.test.msgOne.length; i++){
myData[i] = data.test.msgOne[i];
}
for (var k=0; k<3; k++){
document.write(myData[k])
document.write('<br><br>');
}
if(this.myJ<2){
var myJ=this.myJ;
setTimeout(function(){
getData((myJ+1)).done(handleData).fail(failed);
}, 100);
}
};
getData(0).done(handleData);
function failed(jqXHR, textStatus, errorThrown){
alert("textStatus="+textStatus);
alert("Error= "+errorThrown);
}
根据带有警报的评论，如果它的工作正常然后使用 settimeout.. 它会工作
关于javascript - 使用 jquery 循环遍历 ajax 回调，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16593315/