Question

我使用$ .ajax读取“for”循环中的xml信息

这是我的xml文件：

<application>
    <app id="id-1">
  <html_code>
          <div id="id-1" class="portlet">
               <div class="portlet-header"Links</div>
               <div class="portlet-content">id-1</div>
          </div>
  </html_code>
   </app>
    <app id="id-2">
           <html_code>
                <div id="id-2" class="portlet">
                     <div class="portlet-header"Links</div>
                     <div class="portlet-content">id-2</div>
                </div>
           </html_code>
   </app>
<application>

然后我使用$ .ajax来获取标签中的内容，并在此页面中添加前缀这是js代码：

$.ajax({
   ……
  success:function(){
       for (var i = 0; i < $children.length; i++) {                        
        var $temp_id = $children.eq(i).attr("id");  //"$children" have defined in above 
        $.ajax({
              type: "get",
              url: "Database/App_all.xml",
              dataType: "html",
              success: function (xml) {
                        var $temp_code = $(xml).find("app[id='" + $temp_id + "']").find("html_code").html();
                        $($temp_code).appendTo($("#contain")).hide().show('slow');
                         },
                          error: function () { }
                    });
             }    
  }
});

假设$ children.length只有2，因此，包含<div id="contain">的内容应该包含<div class="portlet-content">id-2</div>和<div class="portlet-content">id-1</div>

但是，<div id="contain">只有一种，<div class="portlet-content">id-2</div>

这有什么问题？

但是当我写警报（“”）;在for (var i = 0; i < $layout_left_children.length; i++) {和var $temp_id = $layout_left_children.eq(i).attr("id");之间喜欢

  for (var i = 0; i < $children.length; i++) {
            alert($children.eq(i).attr("id"));        //could alert correct "id",first "id-1", then "id-2"                      
            var $temp_id = $children.eq(i).attr("id");  //"$children" have defined in above

然后包含可能是正确的

那么为什么会这样呢？我该如何解决这个问题？

谢谢你：）

Answer 1

我相信有一些事情正在发生。首先，$ temp_id变量被提升到函数的顶部，所以它相当于这样做：

$.ajax({
   ……
  success:function(){
       var $temp_id;
       for (var i = 0; i < $children.length; i++) {                        
          $temp_id = $children.eq(i).attr("id");

其次，即使$ temp_id在第一个循环中等于“id-1”，它也会在第二个循环中变为“id-2”，所以当你第一次调用成功回调时，它已经被改为“id-2”。

这可以解决您的问题：

更新2010-12-03：修正了一个错误

$.ajax({
   ……
    success:function(){
         for (var i = 0; i < $children.length; i++) {                        
            var $temp_id = $children.eq(i).attr("id");  //"$children" have defined in above 

            $.ajax({
                type: "get",
                url: "Database/App_all.xml",
                dataType: "html",
                success: function($tid) {
                    return function (xml) {
                        var $temp_code = $(xml).find("app[id='" + $tid + "']").find("html_code").html();
                        $($temp_code).appendTo($("#contain")).hide().show('slow');
                    }
                }($temp_id),
                error: function () { }
            });

        }    
    }
});

我正在做的是将$ temp_id传递给返回另一个函数的函数，该函数将在成功回调中调用。现在可以安全地在成功回调中使用$ tid，因为当$ temp_id在第二个循环中发生变化时它不会受到影响。

更新：回复hh54188的评论

使用“alert”可以打破执行过程并允许意外调用ajax回调。在IE和Firefox中就是这种情况。另一方面，Chrome的行为不是这样的。要对此进行测试，您可以运行以下代码：

for (var i = 0; i < 2; i++) {

    //if (i == 1) alert('stopping execution');

    console.log('loop: ' + i);
    $.ajax({
        url: "Database/App_all.xml",
        dataType: "html",
        success: function () {
            console.log('callback');
        }
    });
}

您将看到控制台中的输出为：
循环：0
循环：1
回调
回调

现在取消注释警报线。在Firefox和IE中，您将看到控制台中的输出现在是：
循环：0
回调
循环：1
回调

显示警告框时，将调用第一个回调。警报实质上改变了代码的行为。在JavaScript中进行开发时，使用“alert”可能会令人沮丧，因为它可能导致代码执行不可预测。因此，我不建议在调试时使用“alert”。相反，使用console.log（）更容易预测。 console.log（）适用于所有现代浏览器和IE 8+。对于较旧的IE，您需要将文本输出到DOM中。

Answer 2

我认为这是由于AJAX请求的异步性质。尝试将async属性设置为false。

请注意

同步请求可能是暂时的锁定浏览器，禁用任何请求处于活动状态时的操作。

关于“for”循环中jquery $ .ajax的问题

2 个答案: