我有一个问题，AJAX 没有请求delete_data.php 来获取成功响应。为什么会出现这种情况呢？ AJAX 甚至不去delete_data.php 执行代码。当我点击“删除数据”按钮时，会弹出确认删除，但当我点击“确认删除”按钮时却没有任何反应。我认为它没有执行delete-data.php 中的代码。任何人都可以检查我的 AJAX 问题吗？
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">×</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">×</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">×</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>
删除_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"));
}
}
?>
这里的答案都没有帮助我。问题是：我使用的是 jQuery 的精简版本，它删除了一些内容，ajax 就是其中之一。
解决方案：只需在此处下载常规（压缩或未压缩）版本的 jQuery 并将其包含在您的项目中。