Question

我正在尝试通过ajax开发添加到购物车的功能，问题是无论我添加到购物车的哪个产品，它都会添加列表中的最后一项，然后在点击任何其他产品时递增相同的产品。这是我的代码： -

<?php         
   $i = 1;
   while($row = mysqli_fetch_array($run_products)){  
     $op_id = $row['option_id'];

     echo "<tr>";
     echo "<td>" . $i . "</td>";
     echo "<td>" . $row['option_desc'] . "</td>";    
     echo "<td> 

     <form action='' method='post' class='p_form'>
       <input type='text' name='product_id' value='$op_id'  pid='$op_id'>
       <input type='text' name='quantity' value='1'  pid='$op_id'>
       <input class='btn btn-primary add' type='submit' name='add_to_cart' value='Add to Cart' id='product' pid='$op_id'>
     </form>
   </td>";
   echo "</tr>";        
   $i++;
 }
 ?>

这是jquery：

<script type="text/javascript">

$(document).ready(function(){

    $(document).on('click','.p_form',function (event) {    
        event.preventDefault();

        var element = $(this);
        var id = element.attr("pid");
         //alert(id);

              $.ajax({

                  url: 'action.php',
                  method: 'post',
                  //data: {id:id}, 
                  data:$('.p_form').serialize(), 
                  success: function(data){

                      $('#message').html(data);                          
                  }
              });

        return false;

    });

});
</script>

这里是action.php，如果最后一个id是4，那么$ product_id总是返回4（例如）

if (!empty($_POST)){
    $product_id = $_POST['product_id'];
    echo $product_id;
}

Answer 1

需要像下面这样做： -

<script type="text/javascript">

$(document).ready(function(){
    $(document).on('click','.add',function (event) {//instead of form click add event on form button click    
        event.preventDefault();
        var element = $(this);
        var id = element.attr("pid");
        //alert(id);

          $.ajax({
              url: 'action.php',
              method: 'post',
              data:element.parent('.p_form').serialize(), //serialize clicked button parent form
              success: function(data){
                  $('#message').html(data);                          
              }
          });
        return false;
    });
});
</script>

Answer 2

单击按钮时触发单击事件，而不是单击表单

这对每种产品都适用。

<script type="text/javascript">

$(document).ready(function(){

    $(document).on('click','.add',function (event) {    
        event.preventDefault();

        var element = $(this);
        var id = element.attr("pid");
         //alert(id);

              $.ajax({

                  url: 'action.php',
                  method: 'post',
                  data: {id:id}, //send id of product you wish to add
                  success: function(data){

                      $('#message').html(data);                          
                  }
              });

        return false;

    });

});
</script>

在服务器端：

if (!empty($_POST)){
    $product_id = $_POST['id'];//get only that id posted in ajax call
    echo $product_id;
}

ajax调用仅返回最后一个标识

2 个答案: