for each data jquery ajax
<p>I am trying to send data to php using jquery ajax. The problem is in the below code.<br>
(You can ignore php)<br>
<strong>HTML</strong></p>

<pre><code>&lt;ul class="blah"&gt;
&lt;li&gt;1&lt;/li&gt;
&lt;li&gt;2&lt;/li&gt;
&lt;li&gt;3&lt;/li&gt;
&lt;li&gt;4&lt;/li&gt;
&lt;/ul&gt;
&lt;div class="result"&gt;&lt;/div&gt;
</code></pre>

<p><strong>JQUERY</strong></p>

<pre><code>$(".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);
    }
});
</code></pre>

<p><strong>each_li</strong> returns only one value in ajax function. I can put the ajax in each function but for every li element it performs ajax call. How can i  give all li values to ajax data &amp;  call ajax only once.<br><br>
<strong>PHP(select-query.php)</strong></p>

<pre><code>&lt;?
$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'];
}
?&gt;
</code></pre>