使用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}),
......
......