Question

我想使用Ajax将表单中的数据发送到我的数据库，并根据按钮的操作执行我需要的URL，但它似乎没有工作，因为它只发送零，好像表格完全是空的

HTML

<form method="post" id="form_shirt" enctype="multipart/form-data">
  ID:
  <br>
  <input type="hidden" name="id_shirt" id="id_shirt" class="form-control"> Name:
  <br>
  <input type="text" name="name_shirt" id="name_shirt" class="form-control" required="required"> Price:
  <br>
  <input type="text" name="price_shirt" id="price_shirt" class="form-control" required="required">

  <button id="insert_shirt" class="submit" name="btninsert" id="btninsert" value="Insert" />
  <button id="update_shirt" class="submit" name="btnupdate" id="btnupdate" value="Update" />
  <button id="delete_shirt" class="submit" name="btndelete" id="btndelete" value="Delete" />
</form>

的JavaScript

$(document).ready(function() {
  $('.submit').on("click", function() {
    $.ajax({
      url: this.id + ".php",
      method: "POST",
      data: $('#form_shirt').serialize(),
      contentType: false,
      cache: false,
      processData: false,
      success: function(data) {
        $('#form_shirt)[0].reset();
        $('#table_shirt').html(data);
      }
    });
  });
});

PHP

<?php

$connect = mysqli_connect("localhost", "root", "", "shirts");

 $output = '';
    $name_shirt = mysqli_real_escape_string($connect, $_POST["name_shirt"]);  
    $price_shirt = mysqli_real_escape_string($connect, $_POST["price_shirt"]);  

    $query = "INSERT into shirts ( name, price)
    VALUES ('$name_shirt','$price_shirt') ";
    if(mysqli_query($connect, $query))
    {
     $output .= '<label class="text-success">Data Inserted</label>';
     $select_query = "SELECT id_shirt, name, price FROM shirts";
     $result = mysqli_query($connect, $select_query);
     $output .= '
      <table id="shirts" class="table table-bordered">  
                   <thead>
                    <tr>  
                        <th>ID</th>
                        <th>NAME</th>
                        <th>PRICE</th>
                    </tr>
</thead>
     ';
     while($row = mysqli_fetch_array($result))
     {
      $output .= '
       <tr>  
       <tbody>
                         <td>' . $row["id_shirt"] . '</td>
                         <td>' . $row["name"] . '</td>
                         <td>' . $row["price"] . '</td>
                    </tr>
                    </tbody>
      ';
     }
     $output .= '</table>';
    }
    echo $output;

?>

Answer 1

您是否知道所有button的{{1}}都被宣布了两次？

id

这很可能是你失火的原因，因为它会尝试POST到一个不存在的URL，返回一个空值。

此外，<button id="insert_shirt" class="submit" name="btninsert" id="btninsert" value="Insert" />还有开始和结束标记我认为下面这一行应该足以达到你的目标：

button

我添加了<button type="button" id="insert_shirt" class="submit">Insert</button>。如果您没有声明type，浏览器会为您选择，并且由于该按钮位于表单内，因此您可能会成为type="button"，因为您正在使用阿贾克斯。
在下面的codepen中，我没有添加类型，因为您可以看到单击其中一个按钮时提交的表单。
我删除了type="submit"和name="btninsert"，我假设您不在PHP脚本中使用value="Insert"，这可能意味着您也不需要value }。

选中此笔以查看其效果： https://codepen.io/anon/pen/MoNXYj?editors=1010
（您实际上可以使用按钮，CodePen将为您模拟提交操作）

更新

这可能有点天真和/或对我一无所知，但如果您仍然遇到问题，更简单的解决方案可能是更改您的设置，以便所有元素和代码以相同的形式提交 - 提交型方向。您现在使用元素进行同步提交，并使用代码进行异步提交来抵消。

<强> HTML：

name

<强> JS：

<div id="form_shirt">
  <input type="hidden" name="id_shirt" id="id_shirt" class="form-control"><br>
  Name: <input type="text" name="name_shirt" id="name_shirt" class="form-control" required="required"><br>
  Price: <input type="text" name="price_shirt" id="price_shirt" class="form-control" required="required">
  <br><br>
  <button type="button" id="insert_shirt" class="submit">Insert</button>
  <button type="button" id="update_shirt" class="submit">Update</button>
  <button type="button" id="delete_shirt" class="submit">Delete</button>
</div>

codepen：https://codepen.io/anon/pen/bRXKaV?editors=1011
（请注意，这不会产生任何输出，因为没有提交表单，只有Ajax POST到不存在的URL，因此不会返回响应）

我的表单没有使用Ajax正确发送数据，我该如何解决？

1 个答案:

更新