Sample.php

Question

我开始学习回调函数，并在回调后附加html！当我在for loop中使用ajax回调函数时，它不会像循环顺序那样追加！它随机附加在正文eg.1,4,2,3中。我想作为循环顺序（1,2,3,4）附加，但不等待一个ajax完成？

<html>
<body>
<script>
var AJAX = {
    call : function(id,callback) {
      $.ajax({
        url : "sample.php",
        data : {id:id},
        success : callback
      })
    }
  };
  for(var i =1;i < 5;i++) {
  AJAX.call(i,function(html){
    $("body").append(html);
  });
  }
</script></body></html>

Sample.php

<?php
if(isset($_GET['id'])) {
  echo "<h".$_GET['id'].">This is heading ".$_GET['id'];
}

This is heading 1
This is heading 4
This is heading 2
This is heading 3

Answer 1

您是否会考虑在回调时插入将填充正确内容的空容器？

for(var i = 0; i < 5; i++) {
  $('body').append('<div id="div' + i + '"></div>');
  (function(){
    var x = $('#div' + i);
      AJAX.call(i,function(html){
        x.append(html);
      });
  })();
}

Answer 2

我认为您可以尝试将从服务器获得的每个html分配给订单。并按给定订单将其应用到body。

for (var i = 1; i < 5; i++) {
var temp = i;

(function(temp) { // use closure to save i
    AJAX.call(i,
    function(html) {
        var $html = $(html).data('order', temp),
        $children = $('body').children();

        if ($children.length === 0) { // the body is empty yet
            $('body').append($html);
        } else { // some requests has return from server, and body is not empty now
            $children.each(function(index) {
                var order = parseInt($(this).data('order'), 10);

                if (index === $children.length - 1) { // last children
                    // insert before or after by order
                    temp > order ? $(this).after($html) : $(this).before($html);
                } else {
                    var nextChildOrder = parseInt($children.eq(index + 1), 10);
                    if (temp < order) { // insert before
                        $(this).before($html);
                    } else if (temp > order && temp < nextChildOrder) { // insert after
                        $(this).after($html);
                    }
                }
            });
        }
    });
})(temp);
}

Answer 3

您可以添加一个数组，并在ajax调用后正常打印。

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>

<script>
var order = new Array();

function add2arrayOrder(i,html)
{
    order[i]=html;
    //alert(i);
}

var AJAX = {
    call : function(id,callback) {
      $.ajax({
        url : "sample.php",
        data : {id:id},
        success : function(html) 
                  {
                    add2arrayOrder(id,html);
                  }
      })
    }
  };

  // make Ajax calls
  for(i =1;i < 5;i++) 
  {
      AJAX.call(i,function(html)
      {
            add2arrayOrder(i,html);
            //alert(order[i]);
      });
  }

// wait a little and print
setTimeout(function(){
  for(i=1;i < 5;i++) 
  {
    $("body").append(order[i]);
  }  
},500);

</script>
</body>
</html>

如何通过ajax将html附加为循环顺序？

Sample.php

3 个答案: