Here we using 3 file for delete data from MySql database using Ajax.
CREATE TABLE `crud` (
`id` int(11) NOT NULL,
`name` varchar(100) NOT NULL,
`email` varchar(100) NOT NULL,
`phone` varchar(100) NOT NULL,
`city` varchar(100) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
<?php
$servername = "localhost";
$username = "root";
$password = "";
$db="school";
/* Create connection */
$conn = mysqli_connect($servername, $username, $password,$db);
?>
<?php
include 'database.php';
$id=$_POST['id'];
$sql = "DELETE FROM `crud` WHERE id=$id";
if (mysqli_query($conn, $sql)) {
echo json_encode(array("statusCode"=>200));
}
else {
echo json_encode(array("statusCode"=>201));
}
mysqli_close($conn);
?>
<!DOCTYPE html>
<html lang="en">
<head>
<title>View Ajax</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>View data</h2>
<table class="table table-bordered table-sm" >
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
<th>City</th>
<th>Action</th>
</tr>
</thead>
<tbody id="table">
</tbody>
</table>
</div>
<script>
$(document).ready(function() {
$.ajax({
url: "View_ajax.php",
type: "POST",
cache: false,
success: function(dataResult){
$('#table').html(dataResult);
}
});
$(document).on("click", ".delete", function() {
var $ele = $(this).parent().parent();
$.ajax({
url: "delete_ajax.php",
type: "POST",
cache: false,
data:{
id: $(this).attr("data-id")
},
success: function(dataResult){
var dataResult = JSON.parse(dataResult);
if(dataResult.statusCode==200){
$ele.fadeOut().remove();
}
}
});
});
});
</script>
</body>
</html>