JQuery AJAX-действие для каждого LI

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 и выполнить запрос AJAX для каждого конкретного идентификатора.Более конкретно, я хотел бы сделать это автоматически (без взаимодействия с пользователем), выполняя каждый отдельный запрос по порядку ... например, когда li # 1 завершится, он начнется следующим.

Я могу выполнить циклчерез каждый li с помощью следующего, но я не вижу, чтобы AJAX автоматически выполнял свой запрос

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

Может кто-нибудь помочь?

Answer 1

Вы можете написать функцию, которая зацикливается до тех пор, пока в ней не заканчивается <li> элементов, переходя к .next() при успехе AJAX, например:

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

Если вы хотите выполнить действие 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() анализирует данные по мере необходимости.

Answer 3

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

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

  });

Я вызываю функцию jquery ajax внутри функции jquery.Я надеюсь, что это должно работать.

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