для каждого данных jquery ajax

Question

Я пытаюсь отправить данные на php с помощью jquery ajax. Проблема заключается в приведенном ниже коде.
(Вы можете игнорировать PHP)
HTML

<ul class="blah"> 
<li>1</li> 
<li>2</li> 
<li>3</li> 
<li>4</li> 
</ul> 
<div class="result"></div> 

Jquery

$(".blah li").each(function(){ 
    var each_li = $(this).text(); 
}); 

$.ajax({ 
    url: 'select-query.php', 
    method: 'POST', 
    data: {li_variable: each_li}, 
    success: function(response){ 
     $('.result').html(response); 
    } 
}); 

each_li возвращает только одно значение в функции AJAX. Я могу поместить ajax в каждую функцию, но для каждого элемента li он выполняет вызов ajax. Как я могу дать все значения li для данных ajax & вызывать ajax только один раз.

PHP (выбрать-query.php)

<? 
$query = "SELECT username FROM table WHERE id = '".$_POST['li_variable']."'"; 
$query_run = mysqli_query($connect,$query); 
while($query_array = mysqli_fetch_assoc($query_run)){ 
    echo $query_array['username']; 
} 
?> 

Answer 1

Вы можете перетащите данные в массив и затем отправьте его в запрос ajax следующим образом:

var each_li = []; 
$(".blah li").each(function(){ 
    each_li.push($(this).text()); //pushing the data in js array 
}); 

$.ajax({ 
    url: 'select-query.php', 
    method: 'POST', 
    data: {li_variable: each_li}, 
    success: function(response){ 
     $('.result').html(response); 
    } 
}); 

Answer 2

Создать массив значений Li и отправить массив в AJAX:

myArray = new Array(); 
cnt = 0; 
$(".blah li").each(function(){ 
     myArray[cnt] = $(this).text(); 
cnt++; 
}); 
var jsonString = JSON.stringify(myArray); 

$.ajax({ 
    url: 'select-query.php', 
    method: 'POST', 
    data: {li_variable: jsonString}, 
    success: function(response){ 
     $('.result').html(response); 
    } 
}); 

В PHP:

$data = json_decode(stripslashes($_POST['li_variable'])); 

    foreach($data as $d){ 
    echo $d; 
    } 

Answer 3

Вы можете собрать все текстовое содержимое элемента с помощью map и get,

var each_li = $(".blah li").map(function(){ 
    return this.textContent; 
}).get(); 

Не бойтесь о .get, думая, что это будет сделать еще одну итерацию, чтобы собрать сохранившиеся ценности. Он просто распакует эту сборку значений из объекта JQuery. Никакой итерации не произойдет под капотом.