使用Ajax的每个按钮的不同动作

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()中的三个独立功能，三个功能都可以合并为一个，发送di通过使用this.classList：url: this.classList[1] + ".php"参数到AJAX url。 1表示每个元素的第二类（分别为insert_shirts,update_shirts和delete_shirts）。您也不需要event.preventDefault()，因为您不再需要提交表单。

希望这会有所帮助！ :)