嘗試使用帶有PHP的Ajax請求將表單數據添加到數據庫

Question

我無法完全將表單的數據添加到已設置的本地數據庫中。

我有一個addproducts.php頁面：

<?php
$title = "Products";
include("Header.php");
include("PHPvalidate.php");
?>


<script src="AjaxProduct.js"></script>



<article>
<section>


        <fieldset><legend><span> Add a product to the database </span>    </legend>

        <form  id ="productsform" method="post" onsubmit="return false;">

        <input type="hidden" name="submitted" value="true">

        <label> Enter a product name:               <input  type="text"     id="name"           name="name"/>           </label>

        <label> Enter a product quantity:           <input  type="number"   id="quantity"       name="quantity"/>       </label>

        <label> Enter a product description:        <input  type="text"     id="description"    name="description"/>    </label>

        <label> Enter a product price:              <input  type="text"     id="price"          name="price"/>          </label>

        <label> Upload a image of the product:      <input name="image"     accept="image/jpeg"     type="file"></label>

        <input id="submit" name="submit" type="button" class="reg"    value="Add Product">

        <div id="check"></div>

        </form>
 </fieldset>
</section>
</article>

然后，我有一個ajax提取請求來收集數據，以准備將其發布到數據庫：

fetch = function () {

var xhr, name, quantity, description, price, target; 

xhr = new XMLHttpRequest();

target = document.getElementById("check");

name = document.getElementById("name").value;
quantity = document.getElementById("quantity").value;
description = document.getElementById("description").value;
price = document.getElementById("price").value;

var vars =      "name="+name+"&quantity="+quantity+"&description="+description+"&price="+price;


changeListener = function () {
    if(xhr.readyState == 4 && xhr.status == 200) {
       target.innerHTML = xhr.responseText;
    } else {
        target.innerHTML = "<p>Something went wrong.</p>";
    }
};

xhr.open("POST", "addSQL.php", true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = changeListener;
xhr.send(vars);


}

pageLoaded = function() {
var fetchbutton = document.getElementById("submit");
    if(fetchbutton) {
        fetchbutton.addEventListener("click", fetch);
    }
}



 window.onload = pageLoaded;

最后是一個addSQL.php

將數據發送到數據庫：

//Stores all information passed through AJAX into the query
   $name = $_POST['name'];
   $quantity = $_POST['quantity'];
   $description = $_POST['description'];
   $price = $_POST['price'];


//Adds information to database
$query = "INSERT INTO products (name, quantity, description, price) VALUES    ('$name','$quantity','$description','$price')";
//Runs the query
$result = $mysqli->query($query) OR die("Failed query $query");
echo $mysqli->error."<p>";

//



?>

當我嘗試將虛擬數據添加到表單中並提交任何內容時，沒有發生任何錯誤或任何錯誤，因此我不確定失敗的地方在哪里。

任何幫助，將不勝感激。

Answer 1

我認為您缺少此功能：

$mysqli = new mysqli("localhost", "user", "password", "database");
if ($mysqli->connect_errno) {
    echo "Failed to connect to MySQL: (" . $mysqli->connect_errno . ") " . $mysqli->connect_error;
}

編輯：現在我也開始研究它，您很容易受到SQL注入的攻擊，數據中的撇號將破壞查詢：

   $name = $mysqli->real_escape_string($_POST['name']);
   $quantity = $mysqli->real_escape_string($_POST['quantity']);
   $description = $mysqli->real_escape_string($_POST['description']);
   $price = $mysqli->real_escape_string($_POST['price']);

Answer 2

您在代碼中添加了一些alert()來查找錯誤。
當您獲得alert(vars);類的變量的值時，在每一行中添加alert alert(vars); 在vars變量中的賦值之后