Question

我有一个数组列表中的数字。数组中的每个数字一个接一个地向外部网站发出请求（数字为url变量），并显示网页内容。

不是列出数组中的所有数字（1,2,3,4,5,6,7,8,9），而是每次向test2.php发出请求时如何添加1，直到数字为止是9（因为这是数组中的最后一个）？

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];

$({}).queue("ajax", $.map(arr, function(item, i) {
  return function(next) {
    return $.ajax({
              type: "POST",
              url: "test2.php",
              data: {n:item}
           })
           .then(function(data) { 
             $("#here").append(data);  
             next();
           });

  }
})).dequeue("ajax")

test2.php

if (isset($_POST["n"])) {
  $content = file_get_contents("https://www.example.com?id=" . $_POST["n"]);
  echo $content
}

Answer 1

为什么不循环？

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];

for(var i = 0; i < arr.length; i++ ) {

    $.ajax({
        type: "POST",
        url: "test2.php",
        data: {n:arr[i]}
    })
    .then(function(data) { 
        $("#here").append(data);
    });

}

当然，显示顺序是这样的机会，而原始函数保持数组顺序。如果这是一个要求，那么你想在循环中创建一个函数数组，然后将它传递给$ .queue（）函数，如下所示：

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
var q = [];

for(var i = 0; i < arr.length; i++ ) {
    q.push((function(i){
        return function(next){
            $.ajax({
                type: "POST",
                url: "test2.php",
                data: {n:arr[i]}
            })
            .then(function(data) { 
                $("#here").append(data);
                next();
            });
        }
    })(i));
}
$({}).queue("ajax", q).dequeue("ajax");

删除数组并仅使用循环索引：

var q = [];
var q_start = 1;
var q_end = 9;

for(var i = q_start; i <= q_end; i++ ) {
    q.push((function(i){
        return function(next){
            $.ajax({
                type: "POST",
                url: "_test2.php",
                data: {n:i}
            })
            .then(function(data) {
                $("#here").append(data);
                next();
            });
        }
    })(i));
}
$({}).queue("ajax", q).dequeue("ajax");

Answer 2

以下是代码：

$({}).queue("ajax", $.map(new Array(9), function(item, i) { // ← notice here
  return function(next) {
    return $.ajax({
              type: "POST",
              url: "test2.php",
              data: {n: i + 1 } // ← and here
           })
           .then(function(data) { 
             $("#here").append(data);  
             next();
           });

  }
})).dequeue("ajax");

更改的是我使用index (i) + 1引用而不是项目。这是有效的，因为i从0开始，并且将递增1，直到它到达array.length - 1，在这种情况下，我不需要for循环并传递一个包含9个未定义元素的数组（{{ 1}}）作为new Array(9)

中的参数

代码在非语义上非常正确，但它适用于您的目的而不会更改太多代码

Answer 3

请试试这个

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script>
var i = 1;
jQuery(document).ready(function(){
    function callAjax() {
       $.ajax({
           type: "POST",
           url: "test2.php",
           data: {n:i},
           success:function(data){
             $("#here").append(data);  
             if ( i++ < 9 ) {
                callAjax();
            }
           }
        });         
    }
    callAjax();
});

请确保您在html中有#here div

Answer 4

还有其他方法可以执行此操作，但遵循您的方案，您的PHP文件可能如下所示：

if (isset($_POST["n"])) {
  $pages = array();
  $number = intval($_POST['n']);

  if ($number > 0 ) {
    for( $i = 1; $i <= $number; $i++ ) {
      $pages[] = file_get_contents("https://www.example.com?id=" . $i);
    }
  }
  return $pages;
}

然后在AJAX成功函数中，您将负责显示收集的内容。

自动添加1直到达到某个数字，而不是列出数组中的整个数字集

4 个答案: