Question

我正在创建一个更新脚本，我在其中列出了每个在UL中详细说明的任务，例如：

<ul id="tasks"><li id="task1">Task one</li><li id="task2">Task two</li><li id="task3">Task three</li></ul>

我正在寻找一种让jQuery系统地遍历每个li并为每个特定ID执行AJAX请求的方法。更具体地说，我想自动执行此操作（无需用户交互）按顺序执行每个单独的请求...例如，当li＃1完成时，它将从下一个开始。

我可以通过使用以下内容遍历每个li，但我看不到让AJAX自动执行其请求

$('li').each(function(index) { task = $(this).attr('id'); /* perform the task */ });

有人可以帮忙吗？

Answer 1

你可以编写一个循环的函数，直到它用完<li>个元素，然后在AJAX成功时转到.next()，如下所示：

function execTask(li) {
  if(!li.length) return; //no more left, abort out
  $.ajax({ 
    url: "something",
    data: { task: li.attr("id") },
    success: function() { execNextTask(li.next()); }
  });
}

然后在加载或想要开始时，只需在第一个<li>上调用它，就像这样：

execTask($('#tasks li:first'));

Answer 2

$('li').each(function(index) {\

$.post("test.php", { name: "John", time: "2pm" },
   function(data){
     alert("Data Loaded: " + data);
   });

  });

我在jquery函数中调用jquery ajax函数。我希望这应该有效。

http://api.jquery.com/jQuery.post/

Answer 3

如果您想同时对页面中的许多元素执行AJAX操作，您可以更好地将它们编译在一起，与服务器进行单个AJAX交互，然后解析响应。否则，如果你有一个包含100个项目的列表，那么你将进行100次往返服务器的访问 - 除了有效之外什么都没有。

所以，以@ zod的代码为基础：

var idArray = array();

$('li').each(function(){
  idArray.push( $(this).attr('id') );
});

$.post(
  "test.php" ,
  {
    ids: idArray.join(',') ,
    anything: "else"
  } ,
  function(data){
    alert("Data Loaded: " + data);
  });
});

在PHP（或其他服务器端语言）脚本中，您只需将ids变量拆分为各个值，然后对每个值进行处理，然后连接已完成的响应（可能使用JSON），然后确保$.post()中的函数根据需要解析数据。

每个LI的jQuery AJAX动作

3 个答案: