在整个表上一个一个地运行 Ajax 请求答案

【问题标题】：Run Ajax request One by one on whole table在整个表上一个一个地运行 Ajax 请求
【发布时间】：2019-12-24 12:23:15
【问题描述】：

我有一张将近 300 多行的表格。在页面加载时，我需要调用 ajax 请求以通过数据库中的row_id 更新每一行的status。当Success 在相应行的列中附加响应时。之后为下一行运行 ajax，依此类推。

我的尝试

$('table tbody tr').each(function(){
   var tracking = $(this).attr('id');
  setInterval(function(){
   $.ajax({
      ...
      success: function(){ 
         //append here 
      }
   });
  }, 1000);

问题

这样，当页面加载时，它会为几乎所有行创建请求，如果记录太多，页面会卡住。

有没有简单的方法在每一行上一个一个地执行 ajax？

【问题讨论】：

你可以试试 jquery.queue() stackoverflow.com/questions/4785724/…
is there any easy way to execute ajax one by one on each row?，是的，循环执行，但请注意这是一个非常糟糕的主意。在您的示例中，您将向您的服务器发出 300 个请求并对其进行泛洪，从而有效地让您的用户对您进行 DDOS。在单个请求中检索所有行所需的信息会更好。
另外，由于您使用的是 ajax，setInterval 是微不足道的/不必要的。
为什么不收集 JSON 数组中的所有 id，然后使用该数组发送单个请求并获取另一个 JSON 数组及其所有状态响应？

标签： javascript jquery ajax

【解决方案1】：

向服务器发出数百个请求以更新状态并不是一个好主意。您的服务器将超载，客户端必须等待很长时间才能完成工作。

也许您可以尝试创建一个新的 API，将您想要跟踪的 ID 数组发送到服务器，服务器将处理这些 ID 的状态。

【讨论】：

【解决方案2】：

“有两种方法，一种是使用带有服务器端脚本的Jquery Datatables，它会自动为您创建分页，第二种是使用您自己的脚本并在其中添加一些逻辑，请看下面的场景，这只是一个例子。”

$('table tbody tr').each(function(){
   var tracking = $(this).attr('id');
var lines=10;
  setInterval(function(){
   $.ajax({
type: "POST",
          data: {lines: lines },
          dataType: "json",
     // ...
      success: function(){ 
    lines=lines+10;
         //append here 
      }
   });
  }, 1000);

“根据您的查询

$lines=$_POST['lines']; 或者根据您的 post 方法，如果您肯定使用 MVC，则使用类方法

并在您的查询中添加这样的 $lines 变量

mysqli_query($con,"SELECT * FROM table limit $lines,10"); //这里你将使用 $lines,10 ，其中 10 是每个间隔显示的记录数。

..希望对你有帮助。”

【讨论】：

【解决方案3】：

好的，我很乐意提供一个实用的方法来做到这一点。

首先，按照您在问题中的方式进行操作肯定会导致浏览器停止运行，因为您将一次执行多个异步请求。大多数情况下，如果发生这种情况，浏览器会发出警告。

现在，另一种方法是在您的 complete() 回调中包含下一个 ajax 调用，并在数组中维护您在每个请求中发送的数据。我使用递归函数来实现这一点

var tracker = [];

$('table tbody tr').each(function(){
    tracker.push($(this).attr('id'));
});

makeRequest(tracker);

function makeRequest(tracker) {
    $.ajax({
        // ajax settings
        data: {'id': tracker.pop()},
        success: function() {
            // use returned result here
        },
        complete: function() {
            if(tracker.length) {
                makeRequest(tracker);
            }
            else return;
        }
    });
}

拜托，这只是实验性的。任何有建议或修改的人都可以提出。

【讨论】：

【解决方案4】：

在 ajax 请求中使用 async: false

$.ajax({ // ajax settings data: {'id': tracker.pop()}, async: false, success: function() { // use returned result here }, complete: function() { if(tracker.length) { makeRequest(tracker); } else return; } });

【讨论】：