PHP购物车点击加号按钮后商品数量未更新问题求助

问题根因 #

• AJAX传参错误：代码中给product_quantity赋值时调用了.val(新值)方法，该方法返回的是jQuery对象而非修改后的数值，后端接收到的参数格式错误无法正常更新。
• Session未生效：PHP处理逻辑如果没有提前开启session_start()，对购物车session的修改不会持久化生效。
• 回调逻辑冲突：success回调中调用的ajaxx()如果是购物车重新渲染逻辑，若后端更新未完成就重新拉取旧数据，会覆盖前端修改的数量值。
• 重复ID异常：加号、减号按钮使用了相同的ID值，不符合DOM规范，可能导致选择器异常。

修复代码 #

前端JS修改 #

$(document).on('click', '.plus', function(){
    // 先获取商品ID和数量输入框实例，避免重复选择DOM
    const productId = $(this).attr("id");
    const $quantityInput = $(this).parent().find(`#quantity3${productId}`);
    // 计算新数量，先更新前端输入框
    const originQuantity = parseInt($quantityInput.val()) || 1;
    const newQuantity = originQuantity + 1;
    $quantityInput.val(newQuantity);

    $.ajax({
        method: "POST",
        data: { 
            action: "plus",   
            product_id: productId,    
            ip: $(`#ip1${productId}`).val(),     
            product_imgsrira: $(`#imgsrira1${productId}`).val(),     
            product_title: $(`#title1${productId}`).val(),       
            product_prix: $(`#prix1${productId}`).val(),           
            product_quantity: newQuantity // 直接传递计算好的数字
        },      
        success:function() {  
            alert("商品更新成功");
            // 若ajaxx是重新拉取购物车的方法，建议确认该方法拉取的是最新的session数据后再调用
            ajaxx();
        },
        error: function() {
            // 请求失败回滚前端数量，避免前后端数据不一致
            $quantityInput.val(originQuantity);
            alert("更新失败，请重试");
        }
    });     
});

后端PHP修改 #

<?php
// 必须在所有输出之前开启session，否则session修改不生效
session_start();

if($_POST['action'] == "plus")
{   
    $updateResult = false;
    foreach($_SESSION["shopping_cart"] as $keys => $values)
    {
        if($values["product_id"] == $_POST["product_id"])
        {
            $_SESSION["shopping_cart"][$keys] = [
                'ip' => get_ip(),
                'product_id' => $_POST["product_id"],
                'product_imgsrira' => $_POST["product_imgsrira"],
                'product_title' => $_POST["product_title"],
                'product_prix' => $_POST["product_prix"],
                // 将数量转为整数，避免字符串等异常值
                'product_quantity' => intval($_POST["product_quantity"])
            ];
            $updateResult = true;
            // 找到对应商品后直接跳出循环，无需遍历剩余内容
            break;
        }
    }
    // 返回更新状态给前端，方便做异常处理
    echo json_encode(['status' => $updateResult]);
    exit;
}      
?>

优化建议 #

• 替换重复ID：将加号、减号按钮的ID替换为自定义属性，比如<i class="fas fa-plus plus" data-product-id="<?php echo $product_id; ?>"></i>，JS中通过$(this).data('product-id')获取商品ID，符合DOM规范。
• 给数量输入框添加min="1"属性，限制输入最小数量，避免出现负数、0等异常值。

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