jQuery的Ajax请求确实在HTML元素不显示数据

当我运行在循环Ajax请求，成功AJAX不显示返回的数据... 这里是代码：jQuery的Ajax请求确实在HTML元素不显示数据

url = ["../siteAdmin/statistics/queriesAjax.php", "../siteAdmin/statistics/geographyAjax.php"]; 
tabContainerId = ['tabs-2', 'tabs-3']; 

for(var i=0, len=url.length; i < len; i++){ 
    console.log(tabContainerId[i]); 
    jQuery("#"+tabContainerId[i]).html('<img src="../assets/images/loading.gif"/>'); 
    jQuery.ajax({ 
     type:"GET", 
     url:url[i], 
     data:{ from:from, to:to }, 
     success: function (msg) { 
      jQuery("#"+tabContainerId[i]).html(msg); 
     }, 
     error: function (msg) { 
      showError("Error occurred.", tabContainerId[i]); 
     } 
    }); 
}

在HTML元素我只看到loading.gif。显示浏览器控制台中ajax成功的Console.log（msg）。但在HTML元素中 - 没有。如果我设置var i = 0或var i = 1数据显示。我在哪里犯了一个错误？

来源

2012-10-30 Mantas Vaitkūnas

这是一个范围界定问题。您需要在这种情况下使用闭包 –

请您详细解释一下吗？ –

Ajax是异步的权利..所以当for循环迭代的时候，大多数成功函数还没有被调用。所以我的当前值将是1（url数组的长度）..当我指向相同的内存位置...当你点击成功功能都将指向相同的位置..所以它将永远是1 –

您在成功回调中使用变量i，但在执行回调时，i几乎肯定会发生变化。

你必须强制我成为回调函数闭包的一部分。要做到这一点的方法之一是把的内容for循环到立即调用的函数表达式（IIFE）：

url = ["../siteAdmin/statistics/queriesAjax.php", "../siteAdmin/statistics/geographyAjax.php"]; 
tabContainerId = ['tabs-2', 'tabs-3']; 

for(var i=0, len=url.length; i < len; i++) { 
    (function(idx) { 
     console.log(tabContainerId[idx]); 
     jQuery("#"+tabContainerId[idx]).html('<img src="../assets/images/loading.gif"/>'); 
     jQuery.ajax({ 
      type:"GET", 
      url:url[idx], 
      data:{ from:from, to:to }, 
      success: function (msg) { 
       jQuery("#"+tabContainerId[idx]).html(msg); 
      }, 
      error: function (msg) { 
       showError("Error occurred.", tabContainerId[idx]); 
      } 
     }); 
    })(i); 
}

实际上，这种“节约”的i的值，它是相同的，当你的回调函数使用它。

我没有通过lint或解释器运行此代码，因此可能会出现语法错误。

来源

2012-10-30 20:28:41 slashingweapon

或者您可以使用param synch来设置您的AJAX调用同步：true – sdespont

@Bouillou ..但将其设置为true是一个坏主意 –

为什么？这是不好的做法吗？它是一个$ .ajax选项 – sdespont

jQuery的Ajax请求确实在HTML元素不显示数据

回答

相关问题