HTML 元素将 PHP 数组中的第一个值传递给 Ajax

Question

我有一个 HTML 从数组列表中获取它的值。我正在提交带有 Ajax 和 PHP 脚本的表单。我面临的问题是单击另一个数组时它只提交第一个值数组。下面是我的表单与数组列表的 PHP 循环的样子：

index.php


       
$query_product = "SELECT * FROM products ORDER BY id DESC";
$product_stmt = $conn->prepare($query_product);


if($product_stmt->execute()){
    while($row_product = $product_stmt->fetch(PDO::FETCH_ASSOC)){
    
    $id = $row_product["id"];
    $title = $row_product["title"];
    $description = $row_product["description"];
    $price = $row_product["price"];
    $img = $row_product["img"];
    
  
                         ?>

 <form onsubmit="clickButton()">
   <input type="hidden" value="<? echo $title ?>" name = "title" id="title" >
   <input type="hidden" value="<? echo $id ?>" name = "id" id="id" >
   <input type="hidden" value="<? echo $price; ?>" name="price" id="price">
  <input type="hidden" value="<? echo $img; ?>" name="img_src" id="img_src">
 <button type="submit" id="add_to_cart" name="add_to_cart" class="btn btn-outline-secondary btn-sm" value="Add to cart" onclick="return clickButton();">Add Cart</button>
</form>

<?php 
     }
  }


?>

我的 Ajax 如下所示：


<script type="text/javascript">

function clickButton(){
   
     var title = $("#title").val();
 var price = $("#price").val();
 var img_src = $("#img_src").val();
 var id = $("#id").val();
    
alert(title);

      $("#add_to_cart").attr("disabled", true);
      
    $.ajax({
        type:"post",
        url:"my_add_cart.php",
        data: 
        {  
           'title' :title,
           'price' :price,
           'img_src' :img_src,
            'id' :id
        },
        cache:false,
        
         beforeSend: function(){
     $("#loading").show();
   },
   
   complete: function(){
     $("#loading").hide();
   },
   
 success: function (data) 
        {
         //   alert(data['message']);
          //enable loading 
             $("#add_to_cart").attr("disabled", false);
          
           $('#msg').html(data['message']);
           $('#count').html(data['count']);        
        }
        
    });
    return false;
 }
</script>

当我尝试 alert(title); 在它上面时 return 只是第一个数组值，即使我点击了其他数组。

Answer 1

如果您在使用 ajax 时忽略了对表单的需求，您可以简化代码，以便每条记录显示一个按钮，该按钮具有各种属性集，可由 javascript click 处理程序，用于构造通过 ajax 发送到 php 服务器的有效负载。

$query_product="SELECT * FROM products ORDER BY id DESC";
$product_stmt = $conn->prepare( $query_product );

if( $product_stmt->execute() ){
    while( $rs = $product_stmt->fetch( PDO::FETCH_ASSOC ) ){
        printf(
            '<input type="button" class="btn btn-outline-secondary btn-sm ajax" value="Add to cart" data-id="%s" data-title="%s" data-price="%s" data-img="%s" />',
            $rs["id"],
            $rs["title"],
            $rs["description"],
            $rs["price"],
            $rs["img"]
        );
     }
  }
?>


<script>

    document.querySelectorAll('input.ajax').forEach( bttn => bttn.addEventListener('click',function(e){
        let fd=new FormData();
            fd.set( 'id', this.dataset.id );
            fd.set( 'title', this.dataset.title );
            fd.set( 'price', this.dataset.price );
            fd.set( 'img_src', this.dataset.img );
        
        alert( this.dataset.title );
        
        $.ajax({
            type:"post",
            url:"my_add_cart.php",
            data:fd,
            cache:false,
            beforeSend: function(){
                $("#loading").show();
            },
            success:function( data ){
                $("#add_to_cart").attr("disabled", false);
                $('#msg').html(data['message']);
                $('#count').html(data['count']);        
            },
            complete: function(){
                $("#loading").hide();
            }
        });
    }))
</script>

Answer 2

所以我自己解决了这个问题，方法是将循环中的每个项目的 ID 添加到 HTML 中输入表单的 ID，使每个项目的 ID 都是唯一的。以下是我的解决方法：


<form onsubmit="clickButton(<? echo $id ?>)">

<input type="hidden" value="<? echo $title ?>" name = "<? echo $id.'_title' ?>" id="<? echo $id.'_title' ?>" >
                                            
<input type="hidden" value="<? echo $id ?>" name = "<? echo $id.'_id' ?>" id="<? echo $id.'_id' ?>" >
                                         
<input type="hidden" value="<? echo number_format($price); ?>" name = "<? echo $id.'_price' ?>" id="<? echo $id.'_price' ?>" >

<input type="hidden" value="<? echo "url".$row_product_img[0]; ?>" name = "<? echo $id.'_img_src' ?>" id="<? echo $id.'_img_src' ?>">
                                        
<button type="submit" id="add_to_cart" name="add_to_cart" class="btn btn-outline-secondary btn-sm" value="Add to cart" onclick="return clickButton(<? echo $id ?>);">Add Cart</button>
                                              
</form>

我的Javascript如下：


<script type="text/javascript">

function clickButton(id){
    var title=document.getElementById(id+'_title').value;
    var price=document.getElementById(id+'_price').value;
    var img_src=document.getElementById(id+'_img_src').value;
    var id=document.getElementById(id+'_id').value;
    
      $("#add_to_cart").attr("disabled", true);
      
    $.ajax({
        type:"post",
        url:"my_add_cart.php",
        data: 
        {  
           'title' :title,
           'price' :price,
           'img_src' :img_src,
            'id' :id
        },
        cache:false,
        
         beforeSend: function(){
     $("#loading").show();
   },
   
   complete: function(){
     $("#loading").hide();
   },
   
 success: function (data) 
        {
         //   alert(data['message']);
          //enable loading 
             $("#add_to_cart").attr("disabled", false);
          
           $('#msg').html(data['message']);
           $('#count').html(data['count']);        
        }
        
    });
    return false;
 }
</script>

HTML 元素将 PHP 数组中的第一个值传递给 Ajax

HTML element passing first value in PHP array to Ajax

html

javascript

php

ajax

jquery