javascript - 使用我不确定的 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;