Отправка нескольких данные в ajax запрос

Добрый день уважаемые пользователи. Ситуация следующая. У меня есть html код:

<div class="all_mail">
<div class="mail" id="151"></div>
<div class="mail" id="231"></div>
<div class="mail" id="1251"></div>
</div>

Я добавляю в блок all_mail с помощью метода append каждый раз разное количество блоков с классом mail и разным id. Далее по кнопке мне нужно отправить через ajax все эти блоки в формате:

function add_mail(){
      $.ajax({          
                   url: "/controller/add_mail.php",  
                   type: "POST",
                   data: {mail1:mail1_id,mail2:mail2_id,mail3:mail3_id,mailn:mailn_id},
                   success: function(html){ 

          }             
   });
    }

Как собрать в цикле все id mail в блоке all_mail я знаю. Как это передать всё в ajax(data) и обработать на php. Т.к. опыта с динамическими данными у меня нет. Заранее благодарю.


Ответы (1 шт):

Автор решения: Ceri

Как вариант.

function add_mail(){
  const query = document.querySelectorAll('.mail');
  const data = [];

  for(var i = 0; i < query.length; i++) {
    data.push(query[i].id)
  }
  console.log(data)
  
  /* Your POST request */
}
<div>
  <div class="all_mail">
    <div class="mail" id="151"></div>
    <div class="mail" id="231"></div>
    <div class="mail" id="1251"></div>
  </div>
  <button onClick={add_mail()}>start</button>
</div>

→ Ссылка