使用 jQuery 进行 Ajax 分页答案

【问题标题】：Ajax Pagination with jQuery使用 jQuery 进行 Ajax 分页
【发布时间】：2016-02-18 04:01:10
【问题描述】：

我需要从对返回的结果数量有限制的 api 中检索数据。

使用找到的结果总数，我可以进行额外的 ajax 调用，直到检索到所有数据。但是，在页面上显示之前，我需要按字母顺序对所有数据进行排序。

在所有 ajax 调用成功后，如何访问数组中的数据？

这是我目前所拥有的：

var mydata = [];

function loadPosts() {

  var api = 'http://someurl.com';

  $.ajax({
    url: api,
    dataType: 'jsonp',
    data: {
      rows: 1,
    },
    success: function(data) {
      totalNumberOfRecords = data.numFound;

      for (var start = 0; start < totalNumberOfRecords; start += rows) {
        $.ajax({
          url: api,
          dataType: 'jsonp',
          data: {
            'rows': rows,
            'start': start,
          },
          success: function(data) {
            $.each(data.namesList, function(index, item) {
              mydata.push(item.firstName);
            });
          },
        });
      }
    },
  });
}

console.log(mydata);

【问题讨论】：

哦。回调地狱。您不应该在循环中使用 ajax。 Ajax 是异步承诺。您可以使用关键字找到一些想法解决方案：异步瀑布（nodejs异步库）

标签： javascript jquery json ajax api

【解决方案1】：

这是一种方便面解决方案。

var numOfAjax = 0;
var numOfResolvedAjax = 0;
for (var start = 0; start < totalNumberOfRecords; start += rows) {
    numOfAjax++;
    $.ajax({
        url: api,
        dataType: 'jsonp',
        data: {
            'rows': rows,
            'start': start,
        },
        success: function(data) {
            $.each(data.namesList, function(index, item) {
                mydata.push(item.firstName);
            });
            numOfResolvedAjax++;

            // Check if all ajax request has been responded to sort the result.
            if (numOfResolvedAjax === numOfAjax) {
                sortMyData(myData);
            }
        },
    });
}

如需完美解决方案，请查看async 库，其中包含许多可以帮助您的功能。例如：async.parallel 可能是您需要的。

【讨论】：

【解决方案2】：

老实说，如果是我遇到了这个 API 限制问题，我会经常使用服务器与 API 通信，以将所有数据捕获到我自己的系统中——无论是 MySQL 还是 Redis 或其他什么。然后我会使用我的前端 JS，但是我想要没有限制

【讨论】：