This tutorial learn you How to delete data from the database using Ajax in PHP. I have shared the best ajax jQuery script with an example. It will help you to delete the record without page refresh
As you know that Ajax executes the Backend code in the background. In this tutorial, Ajax will quickly execute PHP Script.
Therefore, When you click the delete button, data will be deleted from the MySQL database based on its id. Finally, you can delete the existing record without page loading.
Before learning it, You should a good understanding of ajax, PHP & MySQL. otherwise, you may not get it completely.
Delete Data From Database Using Ajax Without Page Refresh
I am going to explain with a simple example. Once you learn it, you can easily delete any kind of data from the data on ajax request.
Before beginning coding, You must configure the following basic requirement.
First of all, you should create the following folder structure
codingstatus.com/ |__database.php |__delete-ajax.js |__delete-data.php |
Connect your MYSQL database to PHP with the connection credentials.
File Name – database.php
<?php $hostname = "localhost"; $username = "root"; $password = ""; $databasename = "codingstatus"; // Create connection $connection = mysqli_connect($hostname, $username, $password,$databasename); // Check connection if (!$connection) { die("Unable to Connect database: " . mysqli_connect_error()); } ?>
Before Updating the data, You have to do the following things
Insert Data Using Ajax in PHP and MySQL
Fetch Data Using Ajax in PHP and MYSQL
First of all, you have ad the following code in the custom function show_data($fetchData)
. This function will be found in fetch-data.php
file. This file is created to fetch data using ajax.
1. Send Ajax Request to Delete data
You have to write ajax code to delete data according to the following steps –
- Create a function
deleteData
and write the following code from the next steps within it. - Define an ajax method and start coding within it.
- Send delete id to the
delete-data.php
with the get method. - If ajax returns success data then display a message and load the page
fetch-data.php
File Name – delete-ajax.js
var deleteData = function(id){ $.ajax({ type: "GET", url: "delete-data.php", data:{deleteId:id}, dataType: "html", success: function(data){ $('#msg').html(data); $('#table-container').load('fetch-data.php'); } }); };
This script will execute when you click the delete button. If it does not work, you should check ajax execution in the web browser. If you use this code then It will prevent refreshing the web page.
2. Delete Data using PHP on Ajax Request
To delete data on an ajax request, You have to write code with the help of the following steps –
- First of all, Include a
database.php
- Create a function
delete_data($connection, $id)
. Where,$connection
&$id
are parameters and write MySQL query to delete data.
File Name – delete-data.php
<?php include('database.php'); if(isset($_GET['deleteId'])){ $id= $_GET['deleteId']; delete_data($connection, $id); } // delete data query function delete_data($connection, $id){ $query="DELETE from usertable WHERE id=$id"; $exec= mysqli_query($connection,$query); if($exec){ echo "Data was deleted successfully"; }else{ $msg= "Error: " . $query . "<br>" . mysqli_error($connection); echo $msg; } } ?>
The code will execute on the ajax request without reloading the page. Don’t forget to include jQuery and delete-data.php in fetch-data.php.
My Suggestion
Dear Developers, I hope that you have got the above Ajax Script. Now. If you have any queries, you can ask me through the following comment box.
I regularly share my coding knowledge with you. So, you should continue to visit my blog and share this tutorial with your friends.
If this tutorial is helpful for you then you should also share it with your friends so that they can learn it as well.
Thanks for giving the time to this tutorial