如何通过 AJAX 提交表单并实时更新购物车数量与成功提示-php教程-PHP中文网

如何通过 AJAX 提交表单并实时更新购物车数量与成功提示

本文介绍如何使用 ajax 异步提交表单，避免页面刷新，同时将 php 会话中的商品数量和 html 提示消息分别写入指定 dom 元素，并实现提示自动消失功能。

本文介绍如何使用 ajax 异步提交表单，避免页面刷新，同时将 php 会话中的商品数量和 html 提示消息分别写入指定 dom 元素，并实现提示自动消失功能。

在电商类 Web 应用中，向购物车添加商品时若每次提交都刷新页面，用户体验较差。理想的方案是：表单异步提交 → 后端处理并返回结构化数据 → 前端解析并更新计数与提示 → 提示自动淡出。本教程将基于 jQuery AJAX 实现这一完整流程。

✅ 推荐方案：前后端 JSON 通信

原始代码中，PHP 直接输出混合 HTML 与数字（如 echo $count; echo '

...';），导致前端难以准确分离「数量」和「提示内容」。更健壮的做法是：后端统一返回 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();
?>

⚠️ 注意事项：

AJAX技术—无刷新获取数据相关课件
AJAX技术—无刷新获取数据相关课件

下载

确保 session_start() 在任何输出（包括空格、BOM）之前调用；

生产环境中应对 $_POST 数据进行校验与转义（如 htmlspecialchars() 处理输出，filter_var() 验证输入）；

使用 (int) 强制类型转换保障 $count 为整数，防止 XSS 或类型混淆。

?️ 前端改造（HTML + JavaScript）

<!-- 提示区域与计数显示 -->
<p id="msg"></p>
<p id="count"></p>

<!-- 表单（注意：移除重复的 onclick，仅保留 onsubmit 即可） -->

'); } }); return false; // 阻止表单默认提交 }

? 小技巧：

使用 dataType: 'json' 后，success 回调的 data 参数已是解析后的 JS 对象，无需 JSON.parse()；

setTimeout + fadeOut() 实现平滑隐藏，比 display:none 更友好；

错误处理分支提升鲁棒性，避免静默失败。