How to Delete Data From Database Using Ajax in PHP

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 using ajax in php

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

Categories Ajax

Leave a Comment