如何使用jQuery实现无刷新提交数据到add数组？代码求校验

首先，你的整体思路是完全正确的——用AJAX实现无刷新提交商品属性到后端的购物车添加逻辑，但前端代码里有个关键小问题需要修正，另外还有一些可以优化的地方，我来一步步给你说明：

1. 前端代码的核心问题修正 #

你AJAX的data参数里写了add: add，这里的第二个add是未定义的变量，后端是通过isset($_POST['add'])来触发添加逻辑的，所以你需要给这个参数传一个具体的值（只要参数存在即可），比如add: '1'或者add: true。

另外，你的DOM查找用了多次parent().parent()，如果后续HTML结构调整，这段代码很容易失效，建议用closest()方法定位到商品的父容器，再查找对应的输入框，代码会更健壮。

修正后的前端代码：

$('.add-to-cartnon').on('click', function(){
    var $btn = $(this);
    // 先定位到商品的父容器（假设你的商品项有个类叫product-item，可根据实际HTML调整）
    var $productContainer = $btn.closest('.product-item');
    
    var id = $productContainer.find('.product-id').val();
    var color = $productContainer.find('.color').val() || '';
    var qty = $productContainer.find('.quantity').val();
    var size = $productContainer.find('.size').val() || '';
    
    $.ajax ({
        method: 'post',
        url: 'example.php',
        // 修正add参数的问题，传递一个有效值触发后端逻辑
        data: { id: id, color: color, qty: qty, size: size, add: '1' },
        success: function(data) {
            // 这里可以添加成功反馈，比如提示用户添加成功，或者更新页面上的购物车计数
            alert('商品已成功加入购物车！');
            // 示例：如果有购物车计数元素，可以更新它
            // $('.cart-count').text(newCount);
        },
        error: function(xhr, status, error) {
            // 处理请求失败的情况，给用户提示
            console.error('添加失败:', error);
            alert('添加商品失败，请稍后重试');
        }
    });
});

2. 后端代码的小优化建议 #

你的后端代码里，如果循环完$products都没找到匹配id的产品，$product变量会未定义，导致后续调用$cart->add()时报错，建议添加一个判断逻辑：

// Add item
if (isset($_POST['add'])) {
    $product = null;
    foreach ($products as $p) {
        if ($_POST['id'] == $p->id) {
            $product = $p;
            break;
        }
    }
    // 检查是否找到对应产品
    if ($product) {
        $cart->add($product->id, $_POST['qty'], [
            'price' => $product->price,
            'color' => (isset($_POST['color'])) ? $_POST['color'] : '',
            'size' => (isset($_POST['size'])) ? $_POST['size'] : '',
        ]);
        // 返回成功标识，方便前端做精准处理
        echo json_encode(['status' => 'success']);
    } else {
        // 返回错误信息
        echo json_encode(['status' => 'error', 'message' => '未找到该商品']);
    }
}

这样前端的success回调里可以根据返回的JSON数据做更灵活的处理，比如：

success: function(data) {
    var response = JSON.parse(data);
    if (response.status === 'success') {
        alert('商品已成功加入购物车！');
        // 更新购物车UI...
    } else {
        alert(response.message);
    }
}

3. 补充说明 #

• 关于price：你前端没有传price是正确的，因为后端是通过商品id从$products里获取价格，这样更安全，避免前端篡改价格数据。
• 数据校验：建议前端对qty做简单校验，比如确保是正整数，避免提交无效数量；后端也需要对$_POST['qty']、$_POST['id']等参数做校验，防止非法数据提交。

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