首页 > 解决方案 > AJAX 不能输入表单中的所有值。插入查询

问题描述

我的代码有什么问题?我不认为后端是这里的问题,我在这里找不到逻辑错误。它说成功,但不插入表单中的值。我是使用ajax的新手。请理解。

 <div class="modal fade" id="AddProduct" tabindex="-1" role="dialog" aria- 
 labelledby="exampleModalCenterTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content">
        <div class="modal-header">
           <h5 class="modal-title" id="exampleModalLongTitle">Add 
Products</h5>
          <button type="button" class="close" data-dismiss="modal" aria- 
label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <form>
        <div class="modal-body">
             <div class="form-group">
              <label for="exampleInputEmail1">Product Name</label>
              <input type="text" class="form-control" id="name"  
 name="product_name" aria-describedby="emailHelp" placeholder="Enter email">
              <small id="namenotif" class="form-text text-muted"></small>
            </div>
             <div class="form-group">
              <label for="exampleInputEmail1">Product Description</label>
              <input type="text" class="form-control" 
 id="product_description"  name="description" aria- 
 describedby="emailHelp" placeholder="Enter email">
              <small id="namenotif" class="form-text text-muted"></small>
            </div>
             <div class="form-group">
              <label for="exampleInputEmail1">Product Price</label>
              <input type="text" class="form-control" id="price"  
 name="product_price" aria-describedby="emailHelp" placeholder="Enter 
email">
              <small id="namenotif" class="form-text text-muted"></small>
            </div>
            <div class="form-group">
              <label for="exampleInputEmail1">Product Discount</label>
              <input type="text" class="form-control" id="discount"  
name="product_discount" aria-describedby="emailHelp" placeholder="Enter 
email">
              <small id="namenotif" class="form-text text-muted"></small>
            </div>
              <div class="form-group">
              <label for="exampleInputEmail1">Product Image</label>
              <input type="text" class="form-control" id="image"  
name="product_image" aria-describedby="emailHelp" placeholder="Enter email">
              <small id="namenotif" class="form-text text-muted"></small>
            </div>

            <div class="form-group">
              <label for="exampleInputEmail1">Product Quantity</label>
              <input type="text" class="form-control" id="quantity"  
name="product_quantity" aria-describedby="emailHelp" placeholder="Enter 
email">
              <small id="namenotif" class="form-text text-muted"></small>
            </div>
            <div class="form-group">
              <label for="exampleSelect1">Select Product Cat</label>
              <select class="form-control" id="category" name 
 ="product_category">
                <option value="Regular">Regular</option>
                <option value="Sale">Sales</option>
                <option value="FeaturedProduct">Featured Products</option>

              </select>
            </div>

        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data- 
dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary" id="saveproduct" 
name="save">Save Product</button>
        </div>

      </div>
    </form>
    </div>
  </div>
</div>

<script> 
$(document).ready(function() {
  $(document).on("click","#saveproduct",function(){
   var name = $("#_name").val();
   var description = $("#description").val();
   var price = $("#price").val();
   var discount = $("#discount").val();
   var image = $("#image").val();
   var quantity = $("#quantity").val();
   var category = $("#category").val();
   $.ajax({
    url:"addproduct.php",
    type:"POST",
    data:{
          name:name,
          description:description,
          price:price,
          discount:discount,
          image:image,
          quantity:quantity,
          category:category
          }, 
    success:function(data){
    alert("Successful");
       }
     });
  });
});
</script>



require_once('conn.php');
if(!empty($_POST) && $_SERVER['REQUEST_METHOD']=='POST'){
$name = $_POST['name'];
$description = $_POST['description'];
$price = $_POST['price'];
$discount = $_POST['discount'];
$image = $_POST['image'];
$quantity = $_POST['quantity'];
$category = $_POST['category'];
$query ="INSERT into products(
                         name,
                         description,
                         price,
                         discount,
                         image,
                         quantity,
                         category
                         )values(
                         '$name',
                         '$description',
                         '$price',
                         '$discount',
                         '$image',
                         '$quantity',
                         '$category'
                          )";
$sql = mysqli_query($con,$query);
}

上面这段代码是我的插入查询的 php 代码,如果你能注意到,我只是将产品图像放在一个变量中,因为我只测试如何使用 ajax 插入。

标签: phphtmlajax

解决方案


您可能需要在 PHP 中考虑以下内容:

$sql = "INSERT INTO products(
  product_name,
  product_description,
  product_price,
  product_discount,
  product_image,
  product_quantity,
  product_category
) values (
  '$product_name',
  '$product_description',
  '$product_price',
  '$product_discount',
  '$product_image',
  '$product_quantity',
  '$product_category'
)";

if (mysqli_query($connection, $sql)) {
  echo "New record created successfully";
} else {
  echo "Error: " . $sql . "<br>" . mysqli_error($connection);
}

mysqli_close($connection);

这会将数据发送回您的 AJAX 脚本。然后你可以这样做:

$.ajax({
  url:"addproduct.php",
  type:"POST",
  data: {
    product_name: product_name,
    product_description: product_description,
    product_price: product_price,
    product_discount: product_discount,
    product_image: product_image,
    product_quantity: product_quantity,
    product_category: product_category
  }, 
  success:function(data){
    console.log("AJAX Success:", data);
  }
});

通过这种方式,您可以看到 PHP 能够连接和更新数据库,或者如果遇到错误,您可以访问该错误数据。

关于您的 SQL 代码,它也可以被利用,请查看: http: //php.net/manual/en/security.database.sql-injection.php


推荐阅读