delete record without a page refresh with ajax in php

Hi guys Today we are going to learn how to delete record without a page refresh with ajax in php .it's very easy and simple. follow below examples to learn how to delete table row in php uisng jquery ajax..

Jquery CDN

=>Database Structure:

Database Name: test

Table Name: user

SQL For Creating Table use:

CREATE TABLE IF NOT EXISTS `user` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `username` varchar(150) NOT NULL,
  `email` varchar(150) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=5 DEFAULT CHARSET=latin1;

Insert Some data using below sql Commands

INSERT INTO `user` (`id`, `username`, `email`) VALUES
(NULL, 'ANJAN KUMAR', 'Anjankumardhali@gmail.com'),
(NULL, 'ANJAN', 'biswasshiuli608@gmail.com'),
(NULL, 'Supriya Gain', 'SupriyaStar@Yahoo.com'),
(NULL, 'Priyoshi Debi', 'priya6@gmail.coma'),
(NULL, 'ANJAN KUMAR', 'Anjankumardhali@gmail.com'),
(NULL, 'ANJAN', 'biswasshiuli608@gmail.com'),
(NULL, 'ANJANBD', 'biswasshiuli608@gmail.com');

Files are
1. index.php
2. connect.php
3. delete.php
4.jquery.js (use JQuery CDN Link)
5. script.js
6. style.css

Now Use below codes for your files to delete record without a page refresh with ajax in php
1. index.php

<head>
<title>AJAX PHP Delete Data From Database</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="script.js"></script>
<link rel="stylesheet" href="style.css" type="text/css"/>
</head>
<div id="content">
<h2>PHP Ajax Deleting Data</h2>
<table>
  <tr>
   <th>UserName</th>
   <th>Email</th>
    <th>Action</th>
  </tr>
   
     <?php
     include("connect.php");
     $result=mysqli_query($conn,"SELECT*FROM user");
     while($row=$result->fetch_array()){?>
   
  <tr>
   <td><?php echo $row['username'];?></td>
   <td><?php echo $row['email'];?></td>
 <td><a href="" id="<?php echo $row['id'];?>" class="delbutton">Delete</a></td>
  </tr>
<?php }?>
</table>
</div>
</html>

2. connect.php

<?php
$conn=new mysqli('localhost','root','','test');
?>

3. delete.php

<?php
  include("connect.php");
   if(isset($_POST['id'])){
    $id=$_POST['id'];
 $result=mysqli_query($conn,"DELETE FROM user WHERE id='$id'");
   }
?>

4. jquery.js
Download Jquery from download.jquery.com or Use JQuery CDN

5. script.js

$(document).ready(function(){
 $(".delbutton").click(function(){
 var id=$(this).attr('id');
 $.ajax({
  type:"POST",
  url:"delete.php",
  data:{id:id},
  success: function(data){
   $("#content").load("index.php");
  }
  
 });
 return false;
 });
});

6. style.css

td,th{
 padding:8px;
 border:1px solid green;
}
table{
 border-collapse:collapse;
}
th{
 font-size:15px;
 padding:10px;
 color:white;
 background:#0033cc;
 border-radius:5px;
}
tr:nth-child(odd){background:lightgreen}
tr:nth-child(even){background:lightblue}

Use above the codes to delete record without page refresh using php jquery ajax
.keep visiting for more codes ..thank you

Latest

Monday, February 5, 2018

delete record without a page refresh with ajax in php