点击Add To Cart按钮后购物车无法更新问题求助

问题现象 #

点击「Add To Cart」按钮后，商品无法加入购物车，前端弹出添加失败提示。通过网络工具查看，服务器返回状态码200，但响应内容为success: error的无效格式，导致前端无法正确解析。

前端HTML代码 #

<div class="col-lg-3 col-6 text-right">
    <a href="#" class="btn border">
        <i class="fas fa-shopping-cart text-primary"></i>
        <span class="badge">0</span>
    </a>
</div>

<div class="col-lg-4 col-md-6 col-sm-12 pb-1">
    <div class="card product-item border-0 mb-4" id="product_item">
        <div class="card-header product-img position-relative overflow-hidden bg-transparent border p-0">
            <img class="img-fluid w-100" src="img/product-1.jpg" alt="" id="product_img">
        </div>
        <div class="card-body border-left border-right text-center p-0 pt-4 pb-3">
            <h6 class="text-truncate mb-3" id="product_name">Colorful Stylish Shirt 0</h6>
            <div class="d-flex justify-content-center">
                <h6>R120.00</h6>
                <h6 class="text-muted ml-2" id="price">
                    <del>R120.00</del>
                </h6>
            </div>
        </div>
        <div class="card-footer d-flex justify-content-between bg-light border">
            <a href="#" class="btn btn-sm text-dark p-0 view-details-btn" id="cart-0">
                <i class="fas fa-eye text-primary mr-1"></i>View Detail
            </a>
            <a href="#" class="btn btn-sm text-dark p-0 add-to-cart-btn" id="cart-1">
                <i class="fas fa-shopping-cart text-primary mr-1"></i>Add To Cart
            </a>
        </div>
    </div>
</div>

jQuery交互代码 #

$(document).ready(function() {
  $('.add-to-cart-btn').on('click', function(e) {
    e.preventDefault();

    var id = $(this).attr("id");
    var product_item = $("#product-item").val();
    var price = $("#price").val();
    var product_img = $("#product_img").val();
    var quantity = $("#quantity").val();
    // Send an AJAX request to update the cart in the database
    $.ajax({
        url: 'update-cart.php',
        method: 'POST',
        data: { id: id, product_item:product_item, price:price, product_img:product_img, quantity:quantity},
        success: function(response) {
            // Handle the response from the server
            if (response.success) {
                // Update the cart badge count
                var cartBadge = $('.fa-shopping-cart + .badge');
                var cartCount = parseInt(cartBadge.text());
                cartBadge.text(cartCount + 1);
            } else {
                // Handle the error scenario
                alert('Failed to add item to the cart. Please try again.');
            }
        },
        error: function() {
            alert('An error occurred while processing your request. Please try again later.');
        }
    });
  });
});

后端PHP代码 #

<?php

error_reporting(E_ALL);
ini_set('log_errors', 1);
ini_set('error_log', 'error.log');


// Check if the AJAX parameter is present
if (isset($_SERVER['HTTP_X_REQUESTED_WITH']) && 
    strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) === 'xmlhttprequest') 
{
    // Proceed with the AJAX request

    // Database connection details
    $host = 'localhost';
    $dbname = 'ecommerce_store';
    $username = 'root';
    $password = '';

    // Retrieve the product information from the AJAX request
    if ($_SERVER['REQUEST_METHOD'] === 'POST' 
        && isset($_POST['id']) 
        && isset($_POST['quantity'])) 
    {
        $id = $_POST['id'];
        $quantity = $_POST['quantity'];

        // Print the received data for debugging
        echo 'Received Data: ';
        echo 'id: ' . $id . ', ';
        echo 'quantity: ' . $quantity;
        echo 'price'.$price;
        echo 'product_name'.$product_name;

        try {
            // Connect to the database
            $conn = new PDO("mysql:host=$host;dbname=$dbname", $username, $password);
            $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

            // Update the cart item with the new quantity or perform other operations
            // Example: Update the quantity in the cart table
            $stmt = $conn->prepare("UPDATE cart SET quantity = :quantity WHERE id = :itemId");
            $stmt->bindParam(':quantity', $quantity);
            $stmt->bindParam(':itemId', $id);
            $stmt->execute();

            // Return a success response
            $response = ['success' => true];
            echo json_encode($response);
            exit; // Stop executing further code
        } catch (PDOException $e) {
            // Return an error response
            $response = ['success' => false, 'error' => $e->getMessage()];
            echo json_encode($response);
            exit; // Stop executing further code
        }
    } else {
        echo json_encode(['success' => false, 'error' => 'Invalid request']);
    }
} else {
    echo json_encode(['success' => false, 'error' => 'Invalid request']);
}
?>

核心问题与修复方案 #

1. 前端参数获取错误 #

• ID匹配错误：jQuery中用$("#product-item")获取容器，但HTML中容器ID是product_item（下划线），需改为$("#product_item")，且非表单元素不能用.val()，应通过遍历父容器提取内容。
• 非表单元素取值错误：<img>的地址需用.attr('src')获取，<h6>的价格需用.text()提取后清理格式，HTML中缺少quantity输入框，需添加或默认设为1。
• 修复后jQuery代码：

$(document).ready(function() {
  $('.add-to-cart-btn').on('click', function(e) {
    e.preventDefault();
    var $card = $(this).closest('.product-item');
    var id = $(this).attr("id");
    var product_name = $card.find('#product_name').text().trim();
    var price = $card.find('h6:not(.text-muted)').text().replace(/[^\d.]/g, '');
    var product_img = $card.find('#product_img').attr('src');
    var quantity = $card.find('#quantity').val() || 1;

    $.ajax({
        url: 'update-cart.php',
        method: 'POST',
        dataType: 'json',
        data: { id, product_name, price, product_img, quantity },
        success: function(response) {
            response.success 
                ? $('.fa-shopping-cart + .badge').text(parseInt($('.fa-shopping-cart + .badge').text()) + 1)
                : alert('添加商品到购物车失败，请重试。');
        },
        error: function() {
            alert('请求处理出错，请稍后重试。');
        }
    });
  });
});

2. 后端JSON格式破坏 #

• 调试输出干扰：PHP中先输出了调试文本Received Data: ...，导致响应不是纯JSON，需删除该输出，改用日志记录调试信息。
• 未定义变量报错：代码中引用了未声明的$price和$product_name，需先从$_POST中接收，或添加判空处理。
• 业务逻辑错误：当前执行UPDATE语句是更新已有购物车商品，但添加商品应先判断是否存在，存在则更新数量，不存在则插入新记录。
• 修复后PHP代码：

<?php
error_reporting(E_ALL);
ini_set('log_errors', 1);
ini_set('error_log', 'error.log');

if (isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) === 'xmlhttprequest') {
    $host = 'localhost';
    $dbname = 'ecommerce_store';
    $username = 'root';
    $password = '';

    if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['id'], $_POST['quantity'], $_POST['price'])) {
        $id = $_POST['id'];
        $quantity = $_POST['quantity'];
        $price = $_POST['price'];
        $product_name = $_POST['product_name'] ?? '';
        $product_img = $_POST['product_img'] ?? '';

        try {
            $conn = new PDO("mysql:host=$host;dbname=$dbname", $username, $password);
            $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

            // 检查商品是否已在购物车
            $checkStmt = $conn->prepare("SELECT id FROM cart WHERE item_id = :itemId");
            $checkStmt->bindParam(':itemId', $id);
            $checkStmt->execute();

            if ($checkStmt->rowCount() > 0) {
                $stmt = $conn->prepare("UPDATE cart SET quantity = quantity + :quantity WHERE item_id = :itemId");
            } else {
                $stmt = $conn->prepare("INSERT INTO cart (item_id, product_name, price, product_img, quantity) VALUES (:itemId, :productName, :price, :productImg, :quantity)");
                $stmt->bindParam(':productName', $product_name);
                $stmt->bindParam(':productImg', $product_img);
            }
            $stmt->bindParam(':quantity', $quantity);
            $stmt->bindParam(':itemId', $id);
            $stmt->bindParam(':price', $price);
            $stmt->execute();

            echo json_encode(['success' => true]);
            exit;
        } catch (PDOException $e) {
            error_log($e->getMessage());
            echo json_encode(['success' => false, 'error' => '数据库操作失败']);
            exit;
        }
    } else {
        echo json_encode(['success' => false, 'error' => '请求参数不完整']);
    }
} else {
    echo json_encode(['success' => false, 'error' => '无效请求']);
}
?>

3. HTML补充（可选） #

若需要用户自定义购买数量，在商品卡片中添加数量输入框：

<div class="card-body border-left border-right text-center p-0 pt-4 pb-3">
    <!-- 原有内容 -->
    <div class="mt-2">
        <input type="number" id="quantity" min="1" value="1" class="form-control form-control-sm w-25 mx-auto">
    </div>
</div>

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