本文教你使用 jquery ajax 配合 php，无需刷新页面即可通过“activate/deactivate”按钮实时更新商品状态（active/inactive），并安全地同步到数据库，适用于初学者快速上手前后端联动开发。
在电商或内容管理系统中，管理员常需动态控制商品是否对用户可见——即“隐藏”（设为 Inactive）或“显示”（设为 Active）。你当前已具备前端按钮和后端 PHP 更新逻辑，但缺少异步通信机制，导致每次操作都需整页提交刷新。解决方案是引入 AJAX（Asynchronous JavaScript and XML），实现无刷新状态切换。
✅ 步骤一：统一按钮结构并添加事件监听
首先，为两个按钮添加统一 class（如 btn-status-toggle），并移除 type="submit" 防止默认表单提交：
⚠️ 注意：type="button" 是关键，避免触发表单提交；value 值建议统一为 activate / deactivate（与后端逻辑一致，避免混淆 active/inactive 拼写差异）。
接着，在页面底部引入 jQuery（推荐 CDN）并绑定点击事件：
✅ 步骤二：创建安全的后端处理脚本（update_product_status.php）
新建独立 PHP 文件，严格校验输入、防止 SQL 注入、统一返回响应：
? 关键安全实践：
- 使用 (int) 强制转换 ID，杜绝注入；
- 用 in_array() 限定 action 值范围；
- 务必改用预处理语句（PDO/MySQLi） 替代字符串拼接 $sql，原文中的 $uid 直接拼接存在严重 SQL 注入风险！
✅ 步骤三：前端展示逻辑同步（可选但推荐）
在成功回调中，可动态更新商品卡片的可见性，例如：
success: function(response) {
if (response === 'success') {
const $productCard = $('#product-' + productId);
if (action === 'deactivate') {
$productCard.fadeOut(300); // 隐藏商品区块
} else {
$productCard.fadeIn(300); // 显示商品区块
}
}
}同时，确保前端商品列表查询时已过滤 WHERE status = 'Active'，真正实现“隐藏效果”。
? 总结
- ✅ 核心工具：jQuery AJAX 实现无刷新交互；
- ✅ 关键改动：按钮改为 type="button" + 绑定 JS 事件；
- ✅ 安全底线：后端必须校验参数、使用预处理语句、避免裸变量拼接 SQL；
- ✅ 体验优化：添加 loading 状态、成功提示、DOM 动态反馈；
- ❌ 切勿使用：alert() 在 PHP 中（无效）、未过滤的 $_POST 直接拼接 SQL、type="submit" 触发全页刷新。
掌握此模式后，你可轻松扩展至批量操作、状态徽章颜色切换、日志记录等进阶功能。
