我創建了一個帶有隱藏輸入表單的表單，該表單將值提交給 PHP 腳本，并通過使用 AJAX 重新加載頁面將每個值存盤在會話陣列中。它將 HTML 成功警報訊息回傳到<p id ="msg"></p>. 我需要有關如何在 AJAX 中發送和成功$count警報<p id="count"></p>訊息的幫助。而且我希望成功警報在顯示 3 秒后消失。下面是我的代碼：<p id ="msg"></p>success:
my_add_cart.php
<?php
session_start();
$_SESSION['title'][]=$_POST['title'];
$_SESSION['price'][]=$_POST['price'];
$_SESSION['img_src'][]=$_POST['img_src'];
$count = count($_SESSION["title"]);
echo $count;
echo '<div >
<span onclick="this.parentElement.style.display=\'none\';">×</span>
<center>Product added successfully to cart.</center>
</div>';
exit();
?>
上面是 my_add_cart.php，下面是我的 HTML 和 javascript：
<script type="text/javascript">
function clickButton(){
var title=document.getElementById('title').value;
var price=document.getElementById('price').value;
var img_src=document.getElementById('img_src').value;
$.ajax({
type:"post",
url:"my_add_cart.php",
data:
{
'title' :title,
'price' :price,
'img_src' :img_src
},
cache:false,
success: function (html)
{
$('#msg').html(html);
}
});
return false;
}
</script>
<html>
<p id="msg"></p>
<p id="count"></p>
<form onsubmit="clickButton()">
<input type="hidden" value="<? echo $title ?>" name = "title" id="title" >
<input type="hidden" value="<? echo number_format($price); ?>" name = "price" id="price" >
<input type="hidden" value="<? echo "https://mikeandcathy.com.ng/admin/UploadFolder/".$row_product_img[0]; ?>" 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>
</html>
uj5u.com熱心網友回復：
我建議把你的服務器代碼變成一個 json api
解決方案
改成my_add_cart.php這個
<?php
session_start();
$_SESSION['title'][]=$_POST['title'];
$_SESSION['price'][]=$_POST['price'];
$_SESSION['img_src'][]=$_POST['img_src'];
$count = count($_SESSION["title"]);
header('Content-Type: application/json; charset=utf-8');
echo json_encode(
[
'count' => $count,
'message' => '<div ><span onclick="this.parentElement.style.display=\'none\';">×</span> <center>Product added successfully to cart.</center></div>';
]
);
exit();
?>
將您的前端代碼更改為此
<script type="text/javascript">
function clickButton(){
var title=document.getElementById('title').value;
var price=document.getElementById('price').value;
var img_src=document.getElementById('img_src').value;
$.ajax({
type:"post",
url:"my_add_cart.php",
data:
{
'title' :title,
'price' :price,
'img_src' :img_src
},
cache:false,
success: function (data)
{
$('#msg').html(data['message']);
$('#count').html(data['count']);
}
});
return false;
}
</script>
<html>
<p id="msg"></p>
<p id="count"></p>
<form onsubmit="clickButton()">
<input type="hidden" value="<? echo $title ?>" name = "title" id="title" >
<input type="hidden" value="<? echo number_format($price); ?>" name = "price" id="price" >
<input type="hidden" value="<? echo "https://mikeandcathy.com.ng/admin/UploadFolder/".$row_product_img[0]; ?>" 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>
</html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/462545.html
標籤：javascript php html jQuery 阿贾克斯