Question

我需要使用来自特定顺序调用的外部php脚本的数据更新页面内容。

在页面上有许多div，我希望通过php脚本（getdata.php）收集数据。由于数据发生变化，数据会一次又一次地被收集。

问题是我需要以正确的顺序获取数据，因为每次调用都依赖于前一次调用的输出，所以

首先使用getdata.php获取div1的数据？id = 1
回复将包含data1 plus xid
在div 1和
使用getdata.php获取div 2的数据？id = xid（来自第一次调用的ID）
回复将包含data2 plus new xid2
在div2中显示data2和
使用getdata.php获取div 3的数据？id = xid2（来自第二次调用的id）
等

div的数量可能因页面而异，因此呼叫数量可能会有所不同。当第一次加载页面时，div的数量是“已知的”，因此可以通过onload javascript调用发送它

尝试使用XMLHttpRequest但无法使其同步工作

另外我不确定这是不是一个好主意，因为如果同步它可能会锁定浏览器，每次调用可能需要10-15秒

所以我认为最好的解决方案是使用标准的异步XMLHttpRequest来锁定浏览器，然后在onreadystatechange函数中的readyState == 4时启动下一个调用，但是如何才能使它成为循环？

请告知

Answer 1

您不应该使用同步XMLHttpRequest。这确实会使浏览器UI无响应。

您可以做的是在前一个成功回调中调用新的XMLHttpRequest。这实际上是一个接一个地链接Ajax请求的常见模式。

$.ajax({
   type: 'GET',
   url:  '/getdata.php?id=1',

   success: function (data) {
      // update div 1 ...

      $.ajax({
         type: 'GET',
         url:  '/getdata.php?id=' + data.id,

         success: function (data) {
            // update div 2 ...

            // and so on ...
         }
      });
   }
});

除了下面的评论之外，这是重构上述内容的一种方法，这样您可以“递归地”重复该过程很多次（在加载页面时确定）。

function callAjax (id, n) {
   $.ajax({
      type: 'GET',
      url:  '/getdata.php?id=' + id,

      success: function (data) {
         // update div
         $(data.id).text(data.content);

         // loop recursively
         if (n > 0) callAjax(data.id, n - 1);
      }
   });
}

callAjax(1, 50);  // this will start the process which will "loop" 
                  // for 50 times. The id of the first request 
                  // will be 1, and subsequent ones will be obtained
                  // from the previous request.

使用多个Ajax调用更新页面内容，这些调用依赖于先前调用的输出

1 个答案: