本文介绍如何使用 ajax 异步提交表单，避免页面刷新，同时将 php 会话中的商品数量和 html 提示消息分别写入指定 dom 元素，并实现提示自动消失功能。
本文介绍如何使用 ajax 异步提交表单，避免页面刷新，同时将 php 会话中的商品数量和 html 提示消息分别写入指定 dom 元素，并实现提示自动消失功能。
在电商类 Web 应用中，向购物车添加商品时若每次提交都刷新页面，用户体验较差。理想的方案是：表单异步提交 → 后端处理并返回结构化数据 → 前端解析并更新计数与提示 → 提示自动淡出。本教程将基于 jQuery AJAX 实现这一完整流程。
✅ 推荐方案：前后端 JSON 通信
原始代码中，PHP 直接输出混合 HTML 与数字（如 echo $count; echo '<div>...';），导致前端难以准确分离「数量」和「提示内容」。更健壮的做法是：后端统一返回 JSON 格式响应，前端按字段精准赋值。
? 后端改造（my_add_cart.php）
<?php
session_start();
// 安全地接收并过滤输入（生产环境建议使用 filter_input）
$title = $_POST['title'] ?? '';
$price = $_POST['price'] ?? '';
$img_src = $_POST['img_src'] ?? '';
// 存入 SESSION 数组（注意：确保 SESSION 已启动且未输出前调用 session_start()）
$_SESSION['title'][] = $title;
$_SESSION['price'][] = $price;
$_SESSION['img_src'][] = $img_src;
$count = count($_SESSION['title']);
// 设置 JSON 响应头，避免 MIME 类型错误
header('Content-Type: application/json; charset=utf-8');
// 返回结构化数据，含数量与可直接插入的 HTML 提示
echo json_encode([
'count' => (int)$count,
'message' => '<div class="alert" id="cart-alert">
<span class="closebtn" onclick="this.parentElement.style.display=\'none\';">×</span>
<center>Product added successfully to cart.</center>
</div>'
]);
exit();
?>⚠️ 注意事项：
- 确保 session_start() 在任何输出（包括空格、BOM）之前调用；
- 生产环境中应对 $_POST 数据进行校验与转义（如 htmlspecialchars() 处理输出，filter_var() 验证输入）；
- 使用 (int) 强制类型转换保障 $count 为整数，防止 XSS 或类型混淆。
?️ 前端改造（HTML + JavaScript）
<!-- 提示区域与计数显示 -->
<p id="msg"></p>
<p id="count"></p>
<!-- 表单（注意：移除重复的 onclick，仅保留 onsubmit 即可） -->
<form onsubmit="return clickButton();">
<input type="hidden" name="title" id="title" value="<?php echo htmlspecialchars($title); ?>">
<input type="hidden" name="price" id="price" value="<?php echo htmlspecialchars(number_format($price)); ?>">
<input type="hidden" name="img_src" id="img_src"
value="<?php echo htmlspecialchars('https://mikeandcathy.com.ng/admin/UploadFolder/' . ($row_product_img[0] ?? '')); ?>">
<button type="submit" class="btn btn-outline-secondary btn-sm">Add to Cart</button>
</form>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
function clickButton() {
const title = $('#title').val().trim();
const price = $('#price').val().trim();
const img_src = $('#img_src').val().trim();
// 防止空值提交
if (!title || !price || !img_src) {
alert('Invalid product data.');
return false;
}
$.ajax({
type: 'POST',
url: 'my_add_cart.php',
data: { title, price, img_src },
cache: false,
dataType: 'json', // 显式声明期望 JSON 响应，自动解析 data 对象
success: function(data) {
// 更新购物车数量
$('#count').text('Items in cart: ' + data.count);
// 插入提示框
$('#msg').html(data.message);
// 【关键】3 秒后自动隐藏提示（增强体验）
setTimeout(() => {
const alertEl = $('#cart-alert');
if (alertEl.length) {
alertEl.fadeOut(300, function() { $(this).remove(); });
}
}, 3000);
},
error: function(xhr, status, error) {
console.error('AJAX Error:', status, error);
$('#msg').html('<div class="alert alert-danger">Failed to add item. Please try again.</div>');
}
});
return false; // 阻止表单默认提交
}
</script>? 小技巧：
- 使用 dataType: 'json' 后，success 回调的 data 参数已是解析后的 JS 对象，无需 JSON.parse()；
- setTimeout + fadeOut() 实现平滑隐藏，比 display:none 更友好；
- 错误处理分支提升鲁棒性，避免静默失败。
✅ 最终效果
- 用户点击「Add to Cart」后，页面无刷新；
- <p id="count"> 实时显示当前购物车商品总数（如 Items in cart: 5）；
- <p id="msg"> 插入带关闭按钮的绿色提示框，并于 3 秒后自动淡出销毁；
- 所有操作均基于标准 HTTP 协议与 JSON 接口，便于后续扩展（如接入 Vue/React 或 REST API 规范）。
通过此方案，你不仅解决了原始需求，还构建了可维护、易测试、安全可靠的异步交互基础。
