嵌套 ajax 父级在子级完成之前完成
nested ajax parent completed before child had finished
$.ajax(
{
type: 'POST',
url: '@Url.Action("EkranListeleSektor")',
dataType: 'json',
async: false, //added async later, no changes
data: { sektorID: $("#ekranSektorID").val() },
success: function (items) {
$.each(items, function (i, ekranlar) {
$.ajax({
type: 'POST',
url: '@Url.Action("IlAdGetir")',
dataType: 'json',
data: { id: ekranlar.il },
success: function (ilAd) {
strIlAd = ilAd;
},
error: function (ex) {
alert('İl isim çekilemedi.' + ex);
}
});
$.ajax({
type: 'POST',
url: '@Url.Action("IlceAdGetir")',
dataType: 'json',
data: { id: ekranlar.ilce },
success: function (ilceAd) {
alert(ilceAd);
strIlceAd = ilceAd;
},
error: function (ex) {
alert('İlce isim çekilemedi.' + ex);
}
});
divContent += '<label class="styledLabel">' +
' <img src=' + (ekranlar.resimURL).replace('~', '') + ' style="height:150px;width:150px;"/>' +
'<input type="checkbox" id="' + ekranlar.ekranID + '" name="' + ekranlar.ekranAd + '" value="' + fiyat +
'" class="styledCheck">' + '<br /><span>Ekran İsim: </span><span class="spanEkranAd">' + ekranlar.ekranAd +
'</span><br /><span>' + 'Günlük Fiyat' + ': </span>' + fiyat + '<br /><span>Ekran Boyutu: </span><span class="spanEkranBoyut">'
+ ekranlar.ekranBoyutID + '"</span> <br/>' +
'<span class="spanIl">' + strIlAd + '</span><br/> <span class="spanIlce">' + strIlAd + '</span> </label>';
$("#imgDiv").append(divContent);
});
}, error: function (ex) {
alert('Ekranlar Çekilemedi.' + ex);
}
});
}
我的操作部分工作正常我可以看到带有警报和调试器的即将到来的数据但是 "EkranListeleSektor" 在嵌套 "IlAdGetir" 或 "IlceAdGetir" 开始之前完成所以当我尝试将输出打印到 div、strIlAd 和 strIlceAd 打印未定义。
我已经 post 我在评论中的回答无论如何我可以想出两种方法来尝试解决你的问题:
- 添加
async: false, to your nested calls
- 尝试将您的 div 打印输出到最后一个(第二个)嵌套 "success" 调用,但首先验证所有调用都在使用调试工具(调试工具 -> 网络)执行.
您应该强烈考虑在此处使用延迟对象来解决您的问题。让我给你一个例子,说明你应该如何根据 jQuery 的方便的 when()
方法来工作:
// This would be code in success handler for your outermost $.ajax() call.
// start "nested" ajax calls wrapped in when()
$.when(
$.ajax({
type: 'POST',
url: '@Url.Action("IlAdGetir")',
dataType: 'json',
data: { id: ekranlar.il }
}),
$.ajax({
type: 'POST',
url: '@Url.Action("IlceAdGetir")',
dataType: 'json',
data: { id: ekranlar.ilce },
})
).done(function(firstCall, secondCall) {
// This is triggered when both calls are successful
// set variables
strIlAd = firstCall[0];
strIlceAd = secondCall[0];
divContent += '<label class="styledLabel">' +
' <img src=' + (ekranlar.resimURL).replace('~', '') +
' style="height:150px;width:150px;"/>' +
'<input type="checkbox" id="' + ekranlar.ekranID + '" name="' + ekranlar.ekranAd + '" value="' + fiyat +
'" class="styledCheck">' + '<br /><span>Ekran İsim: </span><span class="spanEkranAd">' + ekranlar.ekranAd +
'</span><br /><span>' + 'Günlük Fiyat' + ': </span>' + fiyat + '<br /><span>Ekran Boyutu: </span><span class="spanEkranBoyut">'
+ ekranlar.ekranBoyutID + '"</span> <br/>' +
'<span class="spanIl">' + strIlAd + '</span><br/> <span class="spanIlce">' + strIlAd + '</span> </label>';
$("#imgDiv").append(divContent);
}).fail(function(){
// your failure handler, triggered when either ajax call fails
});
您可以看到这确实整合了您的代码,在一个地方获得了 ajax 请求的所有成功处理和失败处理。
就性能和用户体验而言,您可能会发现这比使用同步 ajax 调用更可取,后者会在您从外部 ajax 调用并为每个调用进行两次嵌套调用。
$.ajax(
{
type: 'POST',
url: '@Url.Action("EkranListeleSektor")',
dataType: 'json',
async: false, //added async later, no changes
data: { sektorID: $("#ekranSektorID").val() },
success: function (items) {
$.each(items, function (i, ekranlar) {
$.ajax({
type: 'POST',
url: '@Url.Action("IlAdGetir")',
dataType: 'json',
data: { id: ekranlar.il },
success: function (ilAd) {
strIlAd = ilAd;
},
error: function (ex) {
alert('İl isim çekilemedi.' + ex);
}
});
$.ajax({
type: 'POST',
url: '@Url.Action("IlceAdGetir")',
dataType: 'json',
data: { id: ekranlar.ilce },
success: function (ilceAd) {
alert(ilceAd);
strIlceAd = ilceAd;
},
error: function (ex) {
alert('İlce isim çekilemedi.' + ex);
}
});
divContent += '<label class="styledLabel">' +
' <img src=' + (ekranlar.resimURL).replace('~', '') + ' style="height:150px;width:150px;"/>' +
'<input type="checkbox" id="' + ekranlar.ekranID + '" name="' + ekranlar.ekranAd + '" value="' + fiyat +
'" class="styledCheck">' + '<br /><span>Ekran İsim: </span><span class="spanEkranAd">' + ekranlar.ekranAd +
'</span><br /><span>' + 'Günlük Fiyat' + ': </span>' + fiyat + '<br /><span>Ekran Boyutu: </span><span class="spanEkranBoyut">'
+ ekranlar.ekranBoyutID + '"</span> <br/>' +
'<span class="spanIl">' + strIlAd + '</span><br/> <span class="spanIlce">' + strIlAd + '</span> </label>';
$("#imgDiv").append(divContent);
});
}, error: function (ex) {
alert('Ekranlar Çekilemedi.' + ex);
}
});
}
我的操作部分工作正常我可以看到带有警报和调试器的即将到来的数据但是 "EkranListeleSektor" 在嵌套 "IlAdGetir" 或 "IlceAdGetir" 开始之前完成所以当我尝试将输出打印到 div、strIlAd 和 strIlceAd 打印未定义。
我已经 post 我在评论中的回答无论如何我可以想出两种方法来尝试解决你的问题:
- 添加
async: false, to your nested calls
- 尝试将您的 div 打印输出到最后一个(第二个)嵌套 "success" 调用,但首先验证所有调用都在使用调试工具(调试工具 -> 网络)执行.
您应该强烈考虑在此处使用延迟对象来解决您的问题。让我给你一个例子,说明你应该如何根据 jQuery 的方便的 when()
方法来工作:
// This would be code in success handler for your outermost $.ajax() call.
// start "nested" ajax calls wrapped in when()
$.when(
$.ajax({
type: 'POST',
url: '@Url.Action("IlAdGetir")',
dataType: 'json',
data: { id: ekranlar.il }
}),
$.ajax({
type: 'POST',
url: '@Url.Action("IlceAdGetir")',
dataType: 'json',
data: { id: ekranlar.ilce },
})
).done(function(firstCall, secondCall) {
// This is triggered when both calls are successful
// set variables
strIlAd = firstCall[0];
strIlceAd = secondCall[0];
divContent += '<label class="styledLabel">' +
' <img src=' + (ekranlar.resimURL).replace('~', '') +
' style="height:150px;width:150px;"/>' +
'<input type="checkbox" id="' + ekranlar.ekranID + '" name="' + ekranlar.ekranAd + '" value="' + fiyat +
'" class="styledCheck">' + '<br /><span>Ekran İsim: </span><span class="spanEkranAd">' + ekranlar.ekranAd +
'</span><br /><span>' + 'Günlük Fiyat' + ': </span>' + fiyat + '<br /><span>Ekran Boyutu: </span><span class="spanEkranBoyut">'
+ ekranlar.ekranBoyutID + '"</span> <br/>' +
'<span class="spanIl">' + strIlAd + '</span><br/> <span class="spanIlce">' + strIlAd + '</span> </label>';
$("#imgDiv").append(divContent);
}).fail(function(){
// your failure handler, triggered when either ajax call fails
});
您可以看到这确实整合了您的代码,在一个地方获得了 ajax 请求的所有成功处理和失败处理。
就性能和用户体验而言,您可能会发现这比使用同步 ajax 调用更可取,后者会在您从外部 ajax 调用并为每个调用进行两次嵌套调用。