尝试使用PHP的Ajax请求将表单数据添加到数据库

时间:2014-01-17 13:20:22

标签: javascript php ajax

我无法将我的表单添加到我已设置的本地数据库中。

我有一个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>";

//



?>

当我尝试将虚拟数据添加到表单中并提交没有任何错误或任何事情发生时,我不知道失败点在哪里。

任何帮助都将不胜感激。

2 个答案:

答案 0 :(得分:0)

我想你错过了这个:

$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']);

答案 1 :(得分:0)

您在代码中添加了一些alert()以查找错误     在alert(vars);变量

中赋值后,在vars变量中获取值时,在每一行中添加提醒