我有一個從陣列串列中獲取其值的 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);高于它時，即使我單擊其他陣列，它也只回傳第一個陣列值。
uj5u.com熱心網友回復：
因此，我可以通過將回圈中的每個專案的 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>
uj5u.com熱心網友回復：
如果您在使用 ajax 時忽略了對表單的需求，則可以簡化代碼，以便每條記錄顯示一個按鈕，該按鈕具有各種屬性集，由 javascriptclick處理程式讀取并用于構造通過 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" 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>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/464414.html
標籤：javascript php html jQuery 阿贾克斯