javascript - 使用 Javascript/jQuery 持续返回 ajax 结果？

Question

我想知道是否可以使用 jQuery 的 ajax 函数不断地将结果返回到页面并进行相应更新。

我的意思是这样的: - 用户发起搜索 - jQuery 使用 ajax 函数获取前 25 个结果并将它们添加到表中。 - 当用户查看该列表时，jQuery 会一次持续抓取 25 个结果并将它们添加到表中。

其背后的想法是，假设您的用户搜索有 10,000 个结果。我想将它们加载到一个由 Javascript 控制分页的表中，这样我们就不必每次用户想要转到下一页时都返回到服务器。 用户查看前 25 个结果所需的时间，我们可能会加载接下来的 50 个结果，这意味着我们将拥有一个包含所有结果的非常简洁的界面。

这肯定有一些缺点: - 用户无法立即转到“最后” - 用户无法立即对表格进行排序(或者如果他们这样做，他们可能会立即得到一个未正确排序的表格)

不过，我认为这是一个有趣的想法，并且很想尝试一下......但我不知道从哪里开始。

如何让ajax函数继续运行直到出现某个结果？您能否将结果添加到表中并不断更改该表，而不会给用户带来糟糕的界面体验？

Answer 1

JQuery 提供了 $.post、$.get 和 $.ajax 的回调。因此，您可以编写一个函数来处理输入，并继续将函数作为回调提供，直到结果集加载完成。

如果用户确实尝试对表格进行排序或向下跳转结果列表，则表格将需要重置，并且下一个回调将需要检测排序/分页更改并将这些变量发送到服务器。

类似这样的事情:

var page_number= 1;
var sort_by= 'column_name';
var sort_direction= 'asc';

function handle_result(data) {
  // Do something with the result/return data from the POST
  ....
  // $.post again . . . when there are more rows
  if (data.has_more_rows) {
    page_number++;
    $.post('process.php', { page_number: page_number, sort_by: sort_by, sort_direction: sort_direction }, handle_result);
  }
}

// The initial post . . .
$.post('process.php', { page_number: page_number, sort_by: sort_by, sort_direction: sort_direction }, handle_result);