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

I am trying to delete the table entry without opening the .php file using jQuery post. The whole thing works without problems when I just use the usual html post form.

The alert(data) does not trigger, it only adds ".../?player_id_del=1" or whatever ID click into the URL.

What am I doing wrong?

Here is some of my index.php, i get the whole data from a database:

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

Here is my 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}";
}
?>

Thank You in advance for any help!

There are many issues in your code E.g IDs for form and delete input button are repeating (id of element should not be same it should be unique), The following code is the tested and working.

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

</div>

By default jQuery's click event reload the document so, you should try using,

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

Also instead of $.post, try using $.ajax