如何使用jQuery POST而不是html表单来删除表项

Question

我试图删除表项而不使用jQuery post打开.php文件。当我只使用通常的html帖子表格时，整个过程没有问题。

警报（数据）不会触发，它只会将“... /？player_id_del = 1”或任何ID点击添加到URL中。

我究竟做错了什么？

这是我的一些index.php，我从数据库中获取整个数据：

<table class = "table table-hover">
            <thead>
            <tr>
                <th>Player_ID</th>
                <th>Username</th>
                <th>First_Name</th>
                <th>Last_Name</th>
                <th>Rating</th>
                <th>Country</th>
                <th>Colour</th>
                <th></th>
            </tr>
            </thead>
            <tbody>
            <? foreach($playerArray as $player):?>
                <tr>
                    <td><? echo $player["PLAYER_ID"]; ?></td>
                    <td><? echo $player["USERNAME"]; ?></td>
                    <td><? echo $player["FIRST_NAME"]; ?></td>
                    <td><? echo $player["LAST_NAME"]; ?></td>
                    <td><? echo $player["RATING"]; ?></td>
                    <td><? echo $player["COUNTRY"]; ?></td>
                    <td><? echo $player["COLOUR"]; ?></td>
                    <td>
                        <form id="del-form">
                            <div>
                                <input type="number" id="player_id_del" name="player_id_del" value="<?php echo  htmlspecialchars($player["PLAYER_ID"]); ?>" />
                            </div>
                            <div>
                                <button type="submit" id="submit-btn" class="btn btn-danger">Delete</button>
                            </div>
                        </form>
                        <script>
                            $("#submit-btn").click(function(){
                                $.post("deletePlayer.php", $("#del-form").serialize() , function(data) {
                                    alert(data);
                                });
                            });
                        </script>
                    </td>
                </tr>
            <? endforeach ?>
            </tbody>
        </table>

这是我的deletePlayer.php：

<?php
//include DatabaseHelper.php file
require_once('DatabaseHelper.php');

//instantiate DatabaseHelper class
$database = new DatabaseHelper();

//Grab variable id from POST request
$player_id = '';
if(isset($_POST['player_id_del'])){
    $player_id = $_POST['player_id_del'];
}

// Delete method
$error_code = $database->deletePlayer($player_id);


// Check result
if ($error_code == 1){
    echo "Player with ID: '{$player_id}' successfully deleted!'";
}
else{
    echo "Error can't delete Player with ID: '{$player_id}'. Errorcode: {$error_code}";
}
?>

预先感谢您的任何帮助！

Answer 1

您的代码中存在许多问题E.g表单和删除输入按钮的ID是重复的（元素的ID不应该是唯一的，它应该是唯一的），以下代码是经过测试和工作的。

<?php
//include DatabaseHelper.php file
require_once('DatabaseHelper.php');

//instantiate DatabaseHelper class
$database = new DatabaseHelper();
$response = array();
//Grab variable id from POST request
$player_id = '';
if(isset($_POST['player_id_del'])){
    $player_id = $_POST['player_id_del'];
}

// Delete method
$error_code = $database->deletePlayer($player_id);


// Check result
if ($error_code == 1){
    $response["success"] = 1;
    $response["id"] = $player_id;
    $response["message"] = "Player with ID: '{$player_id}' successfully deleted!'";
}
else{
    $response["success"] = 0;
    $response["message"]= "Error can't delete Player with ID: '{$player_id}'. Errorcode: {$error_code}";
}

echo json_encode($response);
?>

<table class = "table table-hover" id="mPlayersTabel">
   <thead>
      <tr>
         <th>Player_ID</th>
         <th>Username</th>
         <th>First_Name</th>
         <th>Last_Name</th>
         <th>Rating</th>
         <th>Country</th>
         <th>Colour</th>
         <th></th>
      </tr>
   </thead>
   <tbody>
      <? foreach($playerArray as $player):?>
      <tr id= "<? echo $player["PLAYER_ID"]; ?>">
         <td><? echo $player["PLAYER_ID"]; ?></td>
         <td><? echo $player["USERNAME"]; ?></td>
         <td><? echo $player["FIRST_NAME"]; ?></td>
         <td><? echo $player["LAST_NAME"]; ?></td>
         <td><? echo $player["RATING"]; ?></td>
         <td><? echo $player["COUNTRY"]; ?></td>
         <td><? echo $player["COLOUR"]; ?></td>
         <td>
           
               <div>
                 <button type="submit" player-id="<? echo $player["PLAYER_ID"]; ?>" class="btn btn-danger" >Delete</button>

               </div>
          
         </td>
      </tr>
      <? endforeach ?>
   </tbody>
</table>
<script>
   $(document).ready(function(){
        $(".btn-danger").on("click touchend" , function(){
                var id =  $(this).attr("player-id");
                 $.ajax({
                    url: 'deletePlayer.php',
                    type: 'POST',
                    data: {
                        player_id_del: id
                    },
                    dataType: 'json',
                    success: function (response) {
                        //Add this line and try
                        response = JSON.parse(JSON.stringify(response));
                        alert(response['message']);
                        switch (response['success']) {
                            case 1:
                                $("#mPlayer" + response['id']).remove();
                                break;
                        }
        
                    }
            });
            });
    });
</script>

Answer 2

默认情况下，jQuery的click事件会重新加载文档，所以你应该尝试使用，

$("#submit-btn").click(function(e){ 
    e.preventDefault();
    e.stopPropagation();
});

而不是$ .post，尝试使用$ .ajax