如何使用 Javascript 一个一个地加载 URL

Question

如何通过 javascript ajax 或 jquery 从数组中一一触摸 url？因为如果你一触碰大进程php会超时，那么如何一一处理呢？

例子

var myurls = [
"http://example.com/grape.php",
"http://example.com/apple.php",
"http://example.com/orange.php",
"http://example.com/banana.php"];

可能是如果grape.php 完成然后在apple 旁边，如果apple 完成然后在orange 旁边。

然后如果所有过程都完成，则显示警报成功。

Answer 1

你是说这个吗？

var myurls = [
"http://example.com/grape.php",
"http://example.com/apple.php",
"http://example.com/orange.php",
"http://example.com/banana.php"],cnt=0;
function process(data) {
  console.log(data);
}
function loadUrl() {
  if (cnt>=myurls.length) return;
  $.get(myurls[cnt++],function(data) {
    process(data);
    loadUrl();
  });
}
$(function() {
  loadUrl();
})

Answer 2

根据您的问题和我们在您的 cmets 中的讨论，我认为您希望根据您拥有的 URL 数组顺序执行 AJAX 调用。

解决方案 1：使用重复的自引用 $.ajax() 请求

这无疑是更简单的解决方案。我们这里有的是我们跟踪我们所在的数组的位置，并在数组被迭代时停止发出 AJAX 请求。

$(function() {

  // Array of URLs
  var myurls = [
    "https://jsonplaceholder.typicode.com/posts/1",
    "https://jsonplaceholder.typicode.com/posts/2",
    "https://jsonplaceholder.typicode.com/posts/3",
    "https://jsonplaceholder.typicode.com/posts/4"
  ];

  // Iterate through array, and keep a cursor on which item we are at
  var urlCount = 0,
    ajaxCall = function() {
      if (urlCount < myurls.length) {
        console.log('Making AJAX call to url: '+myurls[urlCount]);
        $.ajax({
            url: myurls[urlCount]
          })
          .done(function(returnedData) {
            console.log(returnedData);
            urlCount++;
            ajaxCall();
          });
      }
    };

  ajaxCall();

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

解决方案 2：使用 .then() 使用 for 循环设置链接

对于您的用例，我有 adapted the code provided in this answer，因为对于那些不熟悉延迟对象和返回承诺的人来说，这个示例可能很难理解。

所以诀窍如下：

1. 设置主延迟对象
2. 设置一个通用函数，为您进行 AJAX 调用
3. 遍历数组，使用.then()链接它们
4. 在主延迟对象上启动第一个 AJAX 调用

$(function() {

  // Array of URLs
  var myurls = [
    "https://jsonplaceholder.typicode.com/posts/1",
    "https://jsonplaceholder.typicode.com/posts/2",
    "https://jsonplaceholder.typicode.com/posts/3",
    "https://jsonplaceholder.typicode.com/posts/4"
  ];

  // Set up chain of AJAX requests
  var d = $.Deferred(),
    _d = d,
    ajaxRequest = function(ajaxUrl) {
      // Log in browser console that AJAX call is being made
      console.log('Making AJAX call to: ' + ajaxUrl);

      // Return deferred object for .then() chaining
      return $.ajax({
        url: ajaxUrl
      });
    };

  // We chain each AJAX call to the next one
  for (var i in myurls) {
    // Use IIFE so that reference to `i` is fixed
    (function(j) {
      // Update _d for chaining
      _d = _d.then(function() {
        // The _request is a defered object returned
        // So we can chain deferred methods such as .done()
        var _request = ajaxRequest(myurls[j]).done(function(ajaxData) {
          // Just to show that data is being returned after each call
          console.log(ajaxData);
        });
        
        // Return the deferred object for chaining
        return _request;
      });
    })(i);
  }

  // Kick start sequential ajax call
  d.resolve();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>