如何在电商网站购物车中点击加减按钮，用session_id()更新MySQL购物车表

我想在电商网站购物车点击加减按钮时，更新MySQL数据库的购物车表，希望通过session_id()实现，不需要用户登录，也不用Cookie，请问这可行吗？我已经做了如下尝试：

我的尝试代码 #

add_to_cart.php 页面 #

<body>
    <h1>你的购物车</h1>
    <div class="cart-container" id="cart-container">
    <div class="cart">
        <?php while ($row = $result->fetch_assoc()): ?>
            <div class="cart-item" data-product-id="<?php echo $row['product_id'];?>">
                <h2><?php echo $row['productname']; ?></h2>
                <img style="border-radius:20px;width:150px" src="data:image/jpg;charset=utf;base64, <?php echo base64_encode($row["productimage"]); ?>"/>
                <p>价格: $<?php echo $row['price']; ?></p>
                <div class="quantity-selector">
                    <p>数量:</p>
                    <button class="minus-btn" onclick="decrement(this)">-</button>
                    <input type="number" id="quantity" class="quantity" value="1" min="1">
                    <button class="plus-btn" onclick="increment(this)">+</button>
                </div>
                <p>Quantity: <?php echo $row['quantity']; ?></p>
                <span class="quantity">1</span>
                <p>小计: $<?php echo $row['price'] * $row['quantity']; ?></p>
            </div>
        <?php endwhile; ?>
    </div>
    </div>

    <script>
var item= document.getElementsByClassName("cart-item");

function increment(element) {
    let quantityInput = element.closest("div.cart-item").querySelector(".quantity");
    var productId = element.closest("div.cart-item").getAttribute('data-product-id');
    var currentValue = parseInt(quantityInput.value);
    quantityInput.value = currentValue + 1;
    
    var xhr = new XMLHttpRequest();
    xhr.open('POST', 'update_cart.php', true);
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
            quantityInput.innerText = quantityInput.value;
        }
    };
    xhr.send('product_id=' + productId + '&quantity=' + quantityInput.value);
}

function decrement(element) {
    let quantityInput = element.closest("div.cart-item").querySelector(".quantity");
    var productId = element.closest("div.cart-item").getAttribute('data-product-id');
    var currentValue = parseInt(quantityInput.value);
    if (currentValue > 1) {
        quantityInput.value = currentValue - 1;
    }
    
    var xhr = new XMLHttpRequest();
    xhr.open('POST', 'update_cart.php', true);
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
            quantityInput.innerText = quantityInput.value;
        }
    };
    xhr.send('product_id=' + productId + '&quantity=' + quantityInput.value);
}
    </script>
</body>

update_cart.php 页面 #

<?php
session_start();
if (!isset($_SESSION['user_session'])) {
    $_SESSION['user_session'] = session_id();
}

$session_id = $_SESSION['user_session'];
$product_id = $_POST['product_id'];
$new_quantity = $_POST['quantity'];

// 数据库连接
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "luciavioleta";

$conn = new mysqli($servername, $username, $password, $dbname);

if ($conn->connect_error) {
    die("连接失败: " . $conn->connect_error);
}

// 更新数据库中的数量
$sql = "UPDATE cart SET quantity = ? WHERE user_session = ? AND product_id = ?";
$stmt = $conn->prepare($sql);
$stmt->bind_param("isi", $new_quantity, $session_id, $product_id);

if ($stmt->execute()) {
    echo "数量更新成功";
} else {
    echo "更新失败: " . $conn->error;
}

$stmt->close();
$conn->close();
?>

解答 #

可行性结论 #

可行，但有依赖前提：
PHP的session机制默认依赖Cookie存储session ID，大部分用户浏览器默认允许Cookie，这种场景下你的方案可以正常运行。如果用户禁用了Cookie，session会丢失，购物车数据也会随之丢失。若要兼容禁用Cookie的情况，需开启PHP的session.use_trans_sid配置，通过URL传递session ID，但这种方式存在安全风险且体验较差，普通电商场景下默认Cookie方案足够覆盖绝大多数用户。

代码问题修正 #

1. UI元素冲突：你的HTML中存在多个class="quantity"的元素（input、span、p），导致JS中querySelector(".quantity")可能选中错误元素，建议统一命名，比如将数量输入框改为class="quantity-input"。
2. Session逻辑冗余：$_SESSION['user_session'] = session_id();完全多余，session_start()后直接调用session_id()即可获取当前会话ID。
3. 缺失插入逻辑：如果该session下没有对应商品的购物车记录，UPDATE语句不会生效，需先尝试更新，若受影响行数为0则执行插入操作。
4. UI更新错误：input元素的内容通过value属性控制，而非innerText，后者用于普通文本元素。

修正后的代码示例 #

修正后的 add_to_cart.php（核心部分）

<div class="quantity-selector">
    <p>数量:</p>
    <button class="minus-btn" onclick="decrement(this)">-</button>
    <input type="number" class="quantity-input" value="<?php echo $row['quantity']; ?>" min="1">
    <button class="plus-btn" onclick="increment(this)">+</button>
</div>
<p>小计: $<?php echo $row['price'] * $row['quantity']; ?></p>

function increment(element) {
    const quantityInput = element.closest(".cart-item").querySelector(".quantity-input");
    const productId = element.closest(".cart-item").getAttribute('data-product-id');
    let currentValue = parseInt(quantityInput.value);
    currentValue += 1;
    quantityInput.value = currentValue;

    const xhr = new XMLHttpRequest();
    xhr.open('POST', 'update_cart.php', true);
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
            console.log(xhr.responseText);
        }
    };
    xhr.send(`product_id=${productId}&quantity=${currentValue}`);
}

修正后的 update_cart.php

<?php
session_start();
$session_id = session_id();
$product_id = $_POST['product_id'] ?? '';
$new_quantity = $_POST['quantity'] ?? 1;

// 参数验证
if (empty($product_id) || !is_numeric($new_quantity) || $new_quantity < 1) {
    echo "参数错误";
    exit;
}

// 数据库连接
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "luciavioleta";

$conn = new mysqli($servername, $username, $password, $dbname);

if ($conn->connect_error) {
    die("连接失败: " . $conn->connect_error);
}

// 先尝试更新，无记录则插入
$sql_update = "UPDATE cart SET quantity = ? WHERE user_session = ? AND product_id = ?";
$stmt = $conn->prepare($sql_update);
$stmt->bind_param("isi", $new_quantity, $session_id, $product_id);
$stmt->execute();

if ($stmt->affected_rows === 0) {
    $sql_insert = "INSERT INTO cart (user_session, product_id, quantity) VALUES (?, ?, ?)";
    $stmt_insert = $conn->prepare($sql_insert);
    $stmt_insert->bind_param("sii", $session_id, $product_id, $new_quantity);
    echo $stmt_insert->execute() ? "商品已加入购物车" : "插入失败: " . $conn->error;
    $stmt_insert->close();
} else {
    echo "数量更新成功";
}

$stmt->close();
$conn->close();
?>

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