对于每个数据jquery ajax - for each data jquery ajax

for each data jquery ajax

本文关键字：ajax jquery 数据于每个 | 更新日期: 2023-09-27

我正在尝试使用jquery ajax将数据发送到php。问题出现在以下代码中
（您可以忽略php）
HTML

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

查询

$(".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'];
}
?>

您可以将数据推送到一个数组中，然后在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);
    }
});

您可以使用map和get，来收集元素的所有文本内容

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

不要担心.get会进行另一次迭代来收集保留的值。它将简单地从Jquery对象中展开该值集合。引擎盖下不会发生迭代。

创建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;
  }