Question

我正在对服务器代码进行ajax调用，以便在页面上添加更多记录。但它并没有按照我预期的那样回归。下面是对服务器代码进行Ajax调用的函数。来自服务器端代码的数据以正确的顺序提供数据，当呼叫最初以正确的顺序获取数据时。

function GetPosts()
{
  $.ajax
  ({
      type: 'GET',
      url:  'getposts',
      data: {'pageIndex': JSON.stringify(pageIndex), 'pageSize': JSON.stringify(pageSize) },
      dataType: 'json',
      success: function (data)
      {
          for (var i = 0; i < data.length; i++) {
              $(this).load("showpost/" + data[i], function (result) {
                  $('#container').append(result);
              })
          }
          pageIndex++;
      },

      beforeSend: function () {
          $("#progress").show();
      },
      complete: function () {
          $("#progress").hide();
      },
      error: function () {
          alert("Something went terribly wrong with infinite scrolling " + pageIndex);
      }
  })
}

但这是我在页面上进行调用时看到的数据

<div class="posts" id="posts_25"></div>
<div class="posts" id="posts_24"></div>
<div class="posts" id="posts_23"></div>
<div class="posts" id="posts_22"></div>
<div class="posts" id="posts_21"></div>
<div class="posts" id="posts_20"></div>
<div class="posts" id="posts_19"></div>
<div class="posts" id="posts_18"></div>
<div class="posts" id="posts_17"></div>
<div class="posts" id="posts_16"></div>
<div id="container">
<div class="posts" id="posts_15"></div>
<div class="posts" id="posts_9"></div>
<div class="posts" id="posts_8"></div>
<div class="posts" id="posts_7"></div>
<div class="posts" id="posts_5"></div>
<div class="posts" id="posts_10"></div>
<div class="posts" id="posts_11"></div>
<div class="posts" id="posts_12"></div>
<div class="posts" id="posts_14"></div>
<div class="posts" id="posts_13"></div>
<div class="posts" id="posts_4"></div>
<div class="posts" id="posts_1"></div>
<div class="posts" id="posts_2"></div>
<div class="posts" id="posts_3"></div>
</div>

这是html页面上显示的数据应该如何显示，帖子应该按降序排列，你可以注意到id号码，每次调用时它都会以不同的顺序出现。

<div class="posts" id="posts_25"></div>
<div class="posts" id="posts_24"></div>
<div class="posts" id="posts_23"></div>
<div class="posts" id="posts_22"></div>
<div class="posts" id="posts_21"></div>
<div class="posts" id="posts_20"></div>
<div class="posts" id="posts_19"></div>
<div class="posts" id="posts_18"></div>
<div class="posts" id="posts_17"></div>
<div class="posts" id="posts_16"></div>
<div id="container">
<div class="posts" id="posts_15"></div>
<div class="posts" id="posts_14"></div>
<div class="posts" id="posts_13"></div>
<div class="posts" id="posts_12"></div>
<div class="posts" id="posts_11"></div>
<div class="posts" id="posts_10"></div>
<div class="posts" id="posts_9"></div>
<div class="posts" id="posts_8"></div>
<div class="posts" id="posts_7"></div>
<div class="posts" id="posts_5"></div>
<div class="posts" id="posts_4"></div>
<div class="posts" id="posts_3"></div>
<div class="posts" id="posts_2"></div>
<div class="posts" id="posts_1"></div>
</div>

Answer 1

调用$(this).load("showpost/" ...时。您已发送多个ajax调用以加载posts。根据加载速度，它将随机返回。

解决此问题的方法是在发送ajax调用之前准备dom存根/占位符。返回时，您将分别使用每个结果更新这些存根。

      var stubs = {};
      for (var i in data) {
          stubs[i] = $('<div></div>');
          $('#container').append(stubs[i]);
          $(this).load("showpost/" + data[i], function(result) {
              stubs[i].after(result); //insert result after stub
              stubs[i].remove(); // remove the stub
          });
      }

Ajax以错误的顺序调用HTML元素

1 个答案: