使用Ajax实现商品无刷新加入购物车及加购失效问题修复

你遇到的「Ajax触发success回调但商品没加入购物车、控制台无报错」，核心是3个代码错误，修复后同时能解决之前的加购跳回顶部问题：

• 最核心错误：jQuery选择器语法错误。你通过$(this).attr('id')拿到的是表单的纯id值（比如数字5），但id选择器必须带#前缀才能匹配元素，直接写$(id)会选不到任何DOM，serialize()序列化出的是空字符串，后端收不到id、cantidad等提交参数，自然不会执行加购逻辑，但因为请求本身没报HTTP错误，所以会走success回调。另外你写的$('.nav').load(' .nav')前面多了空格，会导致导航栏选择器匹配失败，购物车标记刷新也会异常。
• 后端逻辑不匹配Ajax场景：当前addCart.php直接输出<script>alert()的JS代码，Ajax拿到返回内容后不会自动执行这段弹窗代码，且没有统一的状态返回，前端无法判断加购结果。
• 表单模板语法错误：数量输入框写了两个class属性，后写的class会被浏览器忽略，导致样式失效。

1. 修正前端Ajax提交逻辑 #

把页面中原有的表单submit监听代码替换为以下内容：

$('body').on('submit', '.formadd', function(ev){
    ev.preventDefault(); // 阻止默认表单跳转放在最前，避免偶发整页跳转
    const $form = $(this); // 直接引用当前触发事件的表单，无需二次查询id
    $.ajax({
        type: 'POST',
        url: 'backend/addCart.php',
        data: $form.serialize(),
        dataType: 'json', // 指定接收JSON格式返回，方便处理状态
        success: function(res) {
            if(res.code === 0) {
                // 加购成功后刷新导航栏购物车标记
                $('.nav').load('productos.php .nav', function(){
                    alert(res.msg);
                });
            } else {
                alert(res.msg);
            }
        },
        error: function() {
            alert('No se pudo agregar al carrito, intente mas tarde');
        }
    });
});

2. 修正商品表单模板语法错误 #

找到商品通用模板productact.php中的数量输入框，合并重复的class属性，同时补上默认值避免空提交：

<!-- 原错误写法：两个class属性 -->
<input class="cantidad pps" type="number" min="1" name="cantidad" class="cantidad" placeholder="1">
<!-- 替换为正确写法 -->
<input class="cantidad pps" type="number" min="1" name="cantidad" placeholder="1" value="1">

3. 重写后端加购接口返回逻辑 #

把addCart.php中直接输出JS弹窗的逻辑改为统一返回JSON数据，适配Ajax请求：

<?php
if(!isset($_SESSION)) { 
    session_start(); 
};
include 'connect.php';
include 'config.php';

// 初始化默认返回结构
$res = ['code' => 1, 'msg' => '参数错误'];

if (isset($_POST['id'], $_POST['btnCart'])) {
    // 校验解密商品ID
    $decrypt_id = openssl_decrypt( $_POST['id'], COD, KEY);
    if(!is_numeric($decrypt_id)){
        $res['msg'] = 'ID incorrecto';
        exit(json_encode($res));
    }
    $ID = $decrypt_id;
    // 处理购买数量
    $CANTIDAD = intval($_POST['cantidad']);
    if($CANTIDAD < 1){
        $CANTIDAD = 1;
    }
    // 执行购物车写入逻辑
    if(!isset($_SESSION['cart'])){
        $producto = [
            'ID' => $ID,
            'CANTIDAD' => $CANTIDAD,
        ];
        $_SESSION['cart'][0] = $producto;
        $res = ['code' => 0, 'msg' => 'Producto Añadido Exitosamente'];
    }else{
        $idProductos = array_column($_SESSION['cart'], "ID");
        if(in_array($ID, $idProductos)){
            $res['msg'] = 'El Producto Ya Ha Sido Agregado';  
        }else{
            $producto = [
                'ID' => $ID,
                'CANTIDAD' => $CANTIDAD,
            ];
            array_push($_SESSION['cart'], $producto);  
            $res = ['code' => 0, 'msg' => 'Producto Añadido Exitosamente'];            
        }
    }
}
// 统一返回JSON格式结果
echo json_encode($res);
exit;
?>

改完后测试可实现以下效果：

• 任意端（尤其是移动端）浏览到任意位置的商品，点击加购不会触发整页跳转、不会回到页面顶部，全程无刷新
• 加购成功、重复加购、参数错误都会正常弹出对应提示，导航栏购物车数量标记同步更新
• 控制台不会出现无报错但功能失效的问题

内容的提问来源于stack exchange，提问作者Luis Grimaldi