我的表單使用Ajax無法正確發送數據，該如何解決？

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的id聲明了兩次？

<button id="insert_shirt" class="submit" name="btninsert" id="btninsert" value="Insert" />

這很可能是您失火的原因，因為它將嘗試過帳到不存在的URL，並返回一個空值。

同樣， button s具有打開和關閉標簽。
我認為以下內容足以滿足您的目標：

<button type="button" id="insert_shirt" class="submit">Insert</button>

• 我添加了type="button" 。 如果您不聲明類型 ，瀏覽器將為您選擇，並且由於按鈕位於表單內，因此它可能會變成type="submit" ，因為您使用的是Ajax，所以您不希望使用該按鈕。
  在下面的代碼欄中，我沒有添加類型，並且如您所見，當您單擊其中一個按鈕時，表單已提交。
• 我刪除了name="btninsert"和value="Insert" ，我假設您沒有在PHP腳本中使用該value ，這可能意味着您也不需要該name 。

檢查這支筆以查看其作用： https : //codepen.io/anon/pen/MoNXYj?editors=1010
（您實際上可以使用按鈕，CodePen會為您模擬提交操作）

---

UPDATE

這對我來說可能有點天真和/或無知，但是如果您仍然遇到問題，一個更簡單的解決方案可能是稍微更改一下設置，以便所有元素和代碼都以相同的方式提交-提交類型-方向。 現在，您正在使用元素進行同步提交，並使用異步提交的代碼進行抵消。

HTML：

<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>

JS：

$(document).ready(function() {
  $('.submit').on("click",function() {
    $.post(this.id+".php", {
      id_shirt: $('#id_shirt').val(),
      name_shirt: $('#name_shirt').val(),
      price_shirt: $('#price_shirt').val()
    }, function(data) {
      $('#form_shirt .form-control').val("");
      $('#table_shirt').html(data);
    });
  });
});

codepen： https ：//codepen.io/anon/pen/bRXKaV ？ editors = 1011
（請注意，這不會產生任何輸出，因為沒有表單提交，只有Ajax POST到了一個不存在的URL，因此不會返回響應）