POST 值被 NULL 值覆盖

Question

这是场景，当点击添加到购物车按钮时，它应该将

Book_ID

和

Quantity

添加到数据库中的购物车表中。

我所做的是单击按钮时，它向名为

add_to_cart.php

的文件发送 AJAX 请求，我在其中编写了 SQL 查询。在该文件中，我在末尾包含了一个标头函数，以便将我重定向回同一页面，并且我可以获得确认弹出消息。我假设的是 php 文件被多次调用并且 POST 值被 NULL 值覆盖，我得到这个错误，而不是将我重定向回同一页面。

警告：C:\xampp\htdocs\Biblion dd_to_cart.php 中未定义的数组键“Book_ID”8

警告：C:\xampp\htdocs\Biblion dd_to_cart.php 中未定义的数组键“数量”9

致命错误：未捕获的 mysqli_sql_exception：C:\xampp\htdocs\Biblion dd_to_cart.php:14 堆栈中的“Book_ID”列不能为空 跟踪：#0 C:\xampp\htdocs\Biblion dd_to_cart.php(14): mysqli_stmt->execute() #1 {main} 抛出 C:\xampp\htdocs\Biblion dd_to_cart.php在线14

这是html代码（写在echo语句里面）

<form method='POST' action='add_to_cart.php'>
    <input type='hidden' name='Book_ID' value='{$bookId}'>
    <input type='hidden' id='quantity' name='Quantity' value='0'>
        <button>
            <img src='images/shopping-cart3.png' onclick='openWrong(\"{$bookId}\")'>
        </button>
</form>

这是JS部分

function openWrong(bookId) {
  const quantity = parseInt(document.querySelector("#price-btn_txt").textContent);

  if (quantity > 0) {
    addToCart(bookId, quantity);
  } 
  else {
    let img = document.querySelector("#popup img");
    let message = document.querySelector("#popup p");
    img.src = "images/cancel-icon.png";
    message.textContent = "ITEM NOT ADDED";
    popup.classList.add("open-popup");
  }
}

function addToCart(bookId, quantity) {
  const xhr = new XMLHttpRequest();
  xhr.open('POST', 'add_to_cart.php');
  xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

  xhr.onload = function() {
    if (xhr.status === 200) {
      // Show the success message
      let img = document.querySelector("#popup img");
      let message = document.querySelector("#popup p");
      img.src = "images/check.png";
      message.textContent = "ADDED TO CART";
      popup.classList.add("open-popup");
    } 
    else {
      // Show the error message
      let img = document.querySelector("#popup img");
      let message = document.querySelector("#popup p");
      img.src = "images/cancel-icon.png";
      message.textContent = "ITEM NOT ADDED";
      popup.classList.add("open-popup");
    }
  };
  {
    xhr.send(`Book_ID=${bookId}&Quantity=${quantity}`);
  }

}

这是 add_to_cart.php

<?php

include_once'connect.php';

$book_id =$_POST['Book_ID'];
$quantity = $_POST['Quantity'];

$stmt = $con->prepare("INSERT INTO cart (Book_id, Quantity) VALUES (?, ?) ON DUPLICATE KEY UPDATE Quantity = Quantity + ?");
$stmt->bind_param('sii', $book_id, $quantity,$quantity);

if (!$stmt->execute()) {
  die('Error inserting data into database: ' . $stmt->error);
}

$stmt->close();
$con->close();

header('Location: ' . $_SERVER['PHP_SELF'] . '?success=1');
exit();
?>

我也试过调试它。我使用

console.log()

语句来检查是否从客户端传递了正确的值以及这些值是否正确。我认为这是导致此错误的 POST 值的覆盖。请帮我解决这个问题。我不知道下一步该怎么做。