Question

好吧，我的问题是我试图插入，更新和删除使用Ajax通过表单发送数据但是我很难使用提交按钮，因为每次点击我都需要每个人执行一个特定的操作他们调用url在哪里是php指令，但正如你在Ajax中看到的那样，动作只在提交时执行而不依赖于我点击的按钮，我真的需要解决这个问题...

FORM

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

        <input type="submit" name="btninsert" id="btninsert" value="Insert" class="btn btn-success"/>
        <input type="submit" name="btnupdate" id="btnupdate" value="Update" class="btn btn-warning">
        <input type="submit" name="btndelete" id="btndelete" value="Delete" class="btn btn-danger">
   </form>

AJAX

$(document).ready(function(event){
 $('#form_shirts').on("submit", function(event){
  event.preventDefault();  
   $.ajax({  
    url:"insert_shirts.php",  
    method:"POST",  
    data:new FormData(this), 
    contentType: false,       
    cache: false,             
    processData:false,
    success:function(data){  
     $('#form_shirt')[0].reset();
     $('#table_shirt').html(data);
    }  
   });  
 });


 $('#form_shirts').on("submit", function(event){
  event.preventDefault();  
   $.ajax({  
    url:"update_shirts.php",  
    method:"POST",  
    data:new FormData(this), 
    contentType: false,       
    cache: false,             
    processData:false,
    success:function(data){  
     $('#form_shirt')[0].reset();
     $('#table_shirt').html(data);
    }  
   });  
 });


     $('#form_shirts').on("submit", function(event){
      event.preventDefault();  
       $.ajax({  
        url:"delete_shirts.php",  
        method:"POST",  
        data:new FormData(this), 
        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

单个表单不能有三个按钮。除了可以在按钮单击时引用的同义类，只需创建三个具有唯一类名的按钮。然后引用该同义类的单击处理程序（而不是表单提交）：

<强> 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 name="btninsert" id="btninsert" value="Insert" class="submit insert_shirts btn btn-success" />
  <button name="btnupdate" id="btnupdate" value="Update" class="submit update_shirts btn btn-warning" />
  <button name="btndelete" id="btndelete" value="Delete" class="submit delete_shirts btn btn-danger" />
</form>

<强>的JavaScript ：

$(document).ready(function() {
  $('.submit').on("click", function() {
    $.ajax({
      url: this.classList[1] + ".php",
      method: "POST",
      data: new FormData(this),
      contentType: false,
      cache: false,
      processData: false,
      success: function(data) {
        $('#form_playera')[0].reset();
        $('#table_playeras').html(data);
      }
    });
  });
});

请注意，您可以在一个$(document).ready()中使用三个单独的函数，并且这三个函数可以合并为一个，通过使用 {{3}向AJAX发送不同的url参数} ：url: this.classList[1] + ".php"。 1表示每个元素的第二个类（分别为insert_shirts，update_shirts和delete_shirts。

另请注意，您不需要event.preventDefault()，因为您不再定位表单提交。

希望这有帮助！：）

使用Ajax为每个按钮执行不同的操作

1 个答案: