AJAX无法请求delete_data.php获取响应，点击确认删除无反应求助

问题现象 #

点击「Delete Data」按钮可正常弹出删除确认模态框，但点击「Confirm Delete」按钮后无任何反应，AJAX未向delete_data.php发起请求，也未执行该文件内的逻辑。

现有代码 #

index.php #

<!DOCTYPE html>
<html>
<head>
    <!-- Add Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

</head>
<body>
    <div class="container">
        <!-- Button to trigger the deletion and show the modal -->
        <button class="btn btn-danger" data-toggle="modal" data-target="#deleteModal">Delete Data</button>
    </div>

    <!-- Bootstrap Modal for the alert -->
    <div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="deleteModalLabel">Delete Confirmation</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    Are you sure you want to delete the data?
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-danger" id="confirmDelete">Delete</button>
                </div>
            </div>
        </div>
    </div>

<!-- Bootstrap Success Modal -->
<div class="modal fade" id="successModal" tabindex="-1" role="dialog" aria-labelledby="successModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="successModalLabel">Success</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                Data has been successfully deleted.
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<!-- Bootstrap Error Modal -->
<div class="modal fade" id="errorModal" tabindex="-1" role="dialog" aria-labelledby="errorModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="errorModalLabel">Error</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                An error occurred while deleting the data.
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

    <!-- Add Bootstrap JS and jQuery -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/js/bootstrap.bundle.min.js"></script>

    <!-- Your JavaScript code -->
    <script>
        $(document).ready(function() {
            $("#confirmDelete").click(function() {
                // Make an AJAX request to your server to delete data from the database
                // Upon successful deletion, show a success modal
                // Otherwise, show an error modal
                $.ajax({
                    type: "POST",
                    url: "delete_data.php", // Replace with your server-side script URL
                    success: function(response) {
                        if (response === "success") {
                            $('#deleteModal').modal('hide'); // Close the confirmation modal
                            $('#successModal').modal('show'); // Show a success modal
                        } else {
                            $('#deleteModal').modal('hide'); // Close the confirmation modal
                            $('#errorModal').modal('show'); // Show an error modal
                        }
                    }
                });
            });
        });
    </script>


</body>
</html>

delete_data.php #

<?php
// Your database connection code here
//header('Content-Type: application/json');

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    // Perform the data deletion operation in your database
    // Replace this with your actual deletion code

    // Example deletion code
    $deleted = true; // Assume the data was successfully deleted

    if ($deleted) {
        echo "success";
    } else {
        echo "error";
    }
    
    /*if ($deleted) {
        echo json_encode(array("status" => "success"));
    } else {
        echo json_encode(array("status" => "error"));
    }*/

}
?>

修复方案 #

1. 替换jQuery版本 #

当前使用的jQuery Slim版（jquery-3.5.1.slim.min.js）移除了AJAX核心功能，导致$.ajax无法执行。替换为完整版本：

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

2. 添加AJAX错误回调 #

原代码仅处理请求成功场景，无法捕获请求失败的情况，添加error回调便于调试：

$.ajax({
    type: "POST",
    url: "delete_data.php",
    success: function(response) {
        if (response.trim() === "success") { // 用trim()过滤输出中的多余空格
            $('#deleteModal').modal('hide');
            $('#successModal').modal('show');
        } else {
            $('#deleteModal').modal('hide');
            $('#errorModal').modal('show');
        }
    },
    error: function(xhr, status, error) {
        console.log("请求错误详情:", status, error);
        $('#deleteModal').modal('hide');
        $('#errorModal').modal('show');
    }
});

3. 清理PHP输出 #

确保delete_data.php没有输出多余的空格或换行，避免干扰响应匹配：

<?php
ob_start(); // 开启输出缓冲

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $deleted = true; // 实际业务中替换为真实删除逻辑
    $result = $deleted ? "success" : "error";
}

ob_end_clean(); // 清理缓冲内的无效输出
echo $result;
?>

4. 验证文件路径 #

确认delete_data.php与index.php在同一目录下，若路径不同，需调整AJAX的url参数为正确的相对或绝对路径。

内容的提问来源于stack exchange，提问作者Kucen