购物车加减按钮触发AJAX请求后无法同步更新PHPMyAdmin的basket表求助

你当前代码存在以下核心错误导致数据库无法更新：

• JS逻辑位置错误：AJAX请求写在点击事件外部，仅页面初始化时执行1次，点击加减按钮时不会触发数据提交
• 变量作用域错误：$button、quantity变量都定义在点击事件回调内部，外部代码无法访问，导致提交的产品ID和数量都是无效值
• 产品ID取值错误：ID属性绑定在数量输入框上，不是按钮本身，直接取$button.attr("id")无法获取到产品ID
• PHP代码存在安全与逻辑缺陷：直接拼接用户参数到SQL语句有注入风险，且缺少必要的参数校验和执行结果判断

修复后的incrementing.js代码 #

$(function() {
    $(".numbers-row").append('<div class="inc button">+</div><div class="dec button">-</div>');
    // 所有交互逻辑都放到点击事件回调内部
    $(".button").on("click", function() {
        var $button = $(this);
        var $input = $button.parent().find("input");
        var oldValue = $input.val();
        var quantity;

        if ($button.text() == "+") {
            quantity = parseFloat(oldValue) + 1;
        } else {
            quantity = oldValue > 0 ? parseFloat(oldValue) - 1 : 0;
        }
        // 从输入框的id属性读取产品ID
        var pid = $input.attr("id");
        // 提交更新请求
        $.ajax({
            type: "POST",
            url: "basket2table.php",
            data: { pid: pid, quantity: quantity },
            success: function() {
                $input.val(quantity);
            },
            // 调试用错误回调，上线可删除
            error: function(xhr) {
                console.log('更新失败：', xhr.responseText);
            }
        });
    });
});

修复后的basket2table.php代码 #

<?php 
include("dbconnect.php");
// 校验参数完整性再执行更新
if(isset($_POST['quantity']) && isset($_POST['pid'])) {
    $quantity = intval($_POST['quantity']);
    $pid = intval($_POST['pid']);
    // 用预处理语句避免SQL注入
    $stmt = $db->prepare("UPDATE Basket SET quantity = ? WHERE product_ID = ?");
    $stmt->bind_param("ii", $quantity, $pid);
    $result = $stmt->execute();
    // 可选返回执行状态方便前端调试
    echo $result ? 'success' : '更新失败：'.$db->error;
} else {
    echo '参数缺失';
}
?>

可选优化shoppingbasket.php代码 #

修改输入框类型、避免重复ID，提升交互合理性：

print '<div class="list_item">
        <img src="Images/' . $img . '">
            <div class="rightside">
                <a href="singlepage.php?subject=' . $product_id . '">' . $name . '</a><br>
                <p>' . $subtitle . '</p><br>
                <form class="quantity" method="POST" action="">
                    <div class="numbers-row">
                        <input type="number" min="0" id="' . $product_id . '" value="' . $quantity . '">
                    </div>
                </form>
            </div>
    </div>';

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