使用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()，因爲您不再需要提交表單。

希望這會有所幫助！ :)