AJAX 不请求 url 页面以获得成功响应-解网

问：

我遇到了一个问题，即 AJAX 不要求delete_data.php以获得成功响应。为什么会这样？AJAX 甚至不去 delete_data.php 执行代码。当我单击“删除数据”按钮时，它会弹出删除确认，但是当我单击“确认删除”按钮时，没有任何反应。我认为它没有执行删除数据.php中的代码。任何人都可以检查我的AJAX上的问题吗？

索引.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/[email protected]/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"));
    }*/

}
?>

PHP AJAX

非常感谢先生！你真的是我的救命恩人！：“D我现在很开心。谢谢你，谢谢你，先生。我已经包含了这个脚本，但没有任何反应<script src=“code.jquery.com/jquery-3.7.1.min.js”></script> 。好吧，也许我包括 2 个 jquery，这就是它无法读取的原因？

0赞 Vel 11/6/2023

您应该只包含一次 jquery 库。不是 2 次。

1赞 Kucen 11/6/2023

哈哈，我还在学习，我现在明白了。非常感谢先生！:D

1赞 Vel 11/7/2023

将此按钮类型更改为submitbutton <button class="btn btn-primary" id="btnTambahNotis" type="button" name="submit">Tambah Notis</button>

上一个：为什么 DotNetNuke 意外地替换了我的 DOM 元素

下一个：Rails 应用中文本框的“建议”功能

AJAX 不请求 url 页面以获得成功响应

AJAX does not request to url page to get success response

评论

评论