我不確定使用xmlHttpRequest接收responseText

Question

我正在使用此代碼使用ajax將數據添加到數據庫。 這是html：

<form>
          Product Name:</br>
          <input type=text name=productName id="addProductName"></br>
          Product Description:</br>
          <input type=text name=productDescription id="addProductDescription"></br>
          Product Quantity:</br>
          <input type=number name=productQuantity id="addProductQuantity"></br>
          <button id="addProduct" type=button>Add Product</button>
        </form>
        <div id="productAdded">test</div>
        <script language="JavaScript" type="text/javascript" src="../javascript/test.js"></script>

這是JavaScript文件test.js：

var xmlhttp;
function getXmlHttpRequest(){
  if (window.XMLHttpRequest)
    {
      xmlhttp=new XMLHttpRequest();
    }
    else
      {
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
}

function addProduct(){
  getXmlHttpRequest();
  var productName = document.getElementById("addProductName");
  var productDescription = document.getElementById("addProductDescription");
  var productQuantity = document.getElementById("addProductQuantity");
  var url = "insert.php?a=" + productName + "&b=" + productDescription + "&c=" + productQuantity;
  xmlhttp.open("GET", url, false);
  xmlhttp.send();
  xmlhttp.onreadystatechange=function()
  {
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
      {
        document.getElementById("productAdded").innerHTML = xmlhttp.responseText
      }
    };
}

var button;
button = document.getElementById("addProduct");
button.addEventListener("click", addProduct);

這是PHP：

<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "products";

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

  $productName = $_GET['a'];
  $productDescription = $_GET['b'];
  $productQuantity = $_GET['c'];
  $sql = "INSERT INTO Product (ProductName, ProductDescription, ProductQuantity) VALUES ('$productName','$productDescription','$productQuantity')";
  $conn->exec($sql);
  echo 'Product ' . $productName . ' with quantity: ' . $productQuantity . ' Added';
}
catch(PDOException $e)
{
  echo $sql . "<br>" . $e->getMessage();
}

$conn = null;

我得到了所有期望的結果，除了當我查看數據庫表時，我看到的是它，而不是輸入到表單中的數據：

[對象HTMLInputElement]

Answer 1

當您執行getElementById ，將返回HTMLInputElement 。 之后，您需要獲取此元素的值：

var productName = document.getElementById("addProductName").value;
var productDescription = document.getElementById("addProductDescription").value;
var productQuantity = document.getElementById("addProductQuantity").value;

Answer 2

您實際上不是從輸入字段中獲取值，而是使用value屬性來獲取它。

var productName = document.getElementById("addProductName").value;
var productDescription = document.getElementById("addProductDescription").value;
var productQuantity = document.getElementById("addProductQuantity").value;

您還應該對日期進行編碼，以防萬一

var url = "insert.php?a=" + encodeURIComponent(productName) + "&b=" + encodeURIComponent(productDescription) + "&c=" + encodeURIComponent(productQuantity);