使用Ajax和php获取愿望清单中项目的多个数据加载

Question

我正在尝试实现一个ajax函数，该函数将在加载时获取产品的ID，并对照db进行检查以查看该用户是否在其愿望清单中，然后使用该信息来更改愿望清单图标的颜色。页面。

当前，该功能正在运行，但它仅查看第一项，并且按预期功能运行，但不针对其余产品运行。

在这方面的任何帮助将不胜感激，非常感谢

JavaScript

<script type="text/javascript">
window.onload = function(){

       var link_data = $(".add-wishlist").data('data');   
       $.ajax({
          type: "POST",
          url: '../source/wishlist_control.php',
          data: ({fav_check: link_data}),
          success: function(data) {

               if(data.replace(/\s+/, "")  == 'YES')
               {
                  $('a[data-data="' + link_data + '"] > i.whishstate').css({"color":"#EB686C"})

               }
               else if (data.replace(/\s+/, "")  == 'NO'){
                   $('a[data-data="' + link_data + '"] > i.whishstate').css({"color":"gray"})

               }
               else {

               }
          } 
       });

    }; 

</script>

带有ID的图标正在打印页面

<a class="add-wishlist" href='javascript:;' data-data='<?php echo protect($usri['id']); ?>'>
<i class='fa fa-heart whishstate'></i>
</a>

php文件代码

if(isset($_POST['fav_check'])) {  
    $addmemberid = $_SESSION['user_id'];
    $addproductid = $_POST['fav_check'];
    $result = mysql_query("SELECT count(product_id) cnt FROM users_wishlist WHERE user_id = '$addmemberid' AND product_id = '$addproductid'") or die(mysql_error());
    $countid = mysql_fetch_assoc($result);
    if($countid['cnt'] == 1){
        echo 'YES';
    } else {
         echo 'NO';
    }
}

Answer 1

jQuery选择器将仅选择匹配的数据第一个元素。 要对所有元素执行此操作，则必须使用jQuery 每个函数遍历它们：

$(".add-wishlist").each(function() {
   var link_data = $(this).data('data');   
   $.ajax({
      type: "POST",
      url: '../source/wishlist_control.php',
      data: ({fav_check: link_data}),
      success: function(data) {

           if(data.replace(/\s+/, "")  == 'YES')
           {
              $('a[data-data="' + link_data + '"] > i.whishstate').css({"color":"#EB686C"})

           }
           else if (data.replace(/\s+/, "")  == 'NO'){
               $('a[data-data="' + link_data + '"] > i.whishstate').css({"color":"gray"})

           }
           else {

           }
      } 
});

Answer 2

与其将AJAX调用置于循环中，不如尝试创建一个愿望清单ID数组，并在单个AJAX调用中将其发布到服务器。 然后在服务器中，您可以获取相应的数据，并将其作为数组返回给AJAX成功函数。 这将保存多个AJAX请求并提高性能。
因此，代码将如下所示：

var link_data = [];
$(".add-wishlist").each(function() {
  link_data.push($(this).data('data'));
});
$.ajax({
  type: "POST",
  url: '../source/wishlist_control.php',
  data: ({fav_check: link_data}),
......
......