What is Ajax

Asynchronous JavaScript and XML (Ajax) refer to a group of technologies that are used to develop web applications. By combining these technologies, web pages appear more responsive since small packets of data are exchanged with the server and web pages are not reloaded each time that a user makes an input change. Ajax enables a web application user to interact with a web page without the interruption of constant web page reloading. Website interaction happens quickly with only portions of the page reloading and refreshing





 Connection.php

<?php
$conn=mysqli_connect("localhost","root"," ","db_std");

?>

Insert with Ajax

<?php
$name=$_POST['name'];
$number=$_POST['number'];
    $conn=mysqli_connect("localhost","root","","db_std");
    $sql="INSERT INTO `register_n`( `Name`, `Number`)
VALUES ('$name','$number') ";
    $query=mysqli_query($conn,$sql);
if($query){
    echo 1;
}
else{
    echo 0;
}
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" >
</head>
<body>
    <div id="error"  class="text-danger  text-center"></div>
    <div id="success"  class="text-success  text-center"></div>
  <div class="container">
    <div class="row">
        <div class="col-sm-4"></div>
        <div class="col-sm-4">
        <form id="formadd">
        Name:
        <input type="text" id="name" class="form-control">
        Number:
        <input type="text" id="number" class="form-control"><br>
     <button type="submit" id="submit" class="btn btn-success">Submit</button>
    </form>
        </div>
    </div>
  </div>
  <br>
    <div id="outer"></div>
    <div id="modal">
        <div id="modal-form">
<!-- <h1>Update Form </h1> -->

        <div>
    </div>
    <script src="https://code.jquery.com/jquery-3.6.1.js"></script>
    <script>
$(document).ready(function () {
    function loadData(){
        $.ajax({
            url:'display.php',
            type:'post',
            success:function(data)
            {
                $('#outer').html(data);
            }
        })
    }
    loadData();
    $('#submit').on("click",function(e){
        e.preventDefault();
        var name=$('#name').val();
        var number=$('#number').val();
        if(name=="" || number=="")
        {
        $('#error').html("Please fill the data").slideDown();
        $("#success").slideUp();
        }else{

            $.ajax({
            url:'insert_data.php',
            type:"POST",
            data:{name:name,number:number},
            success:function(data){
                if(data==1){
                    loadData();  
                    $("#formadd").trigger("reset");
                    $('#success').html("Data Insert Successfully").slideDown();
                      $("#error").slideUp();
                }else{
                 
                    $('#error').html("not sent record").slideDown();
                      $("#success").slideUp();
                }
             
            }
        })

        }
       
       
    })
    $(document).on("click",  ".delete-btn" ,function(){
        if(confirm("Do you want to delete record "))
        {
        var stdelete= $(this).data("id");
        var element=this;
     $.ajax({
        url:"delete.php",
        type:"POST",
        data:{id:stdelete},
        success:function(data){
            if(data==1)
            {
                $(element).closest("tr");
            }
            else{
                $('#error').html("not  delete record").slideDown();
                      $("#success").slideUp();
            }
        }
     })
    }
    });
   

});


</script>
</body>
</html>
Display.php with ajax

<?php
$conn=mysqli_connect("localhost","root","","db_std");
$sql="SELECT * FROM `register_n` ";
$query=mysqli_query($conn,$sql);
$output="";
if(mysqli_num_rows($query) >0){
$output='<table border="1" width="30%"   cellspacing="0"
 cellpadding="5px"   style=" text-align:center; margin-left:230px">
<tr>
<th>Id</th>
<th>Name</th>
<th>Number</th>
<th>Delete</th>
<th>Update</th>

</tr>';
while($row=mysqli_fetch_assoc($query)){
    $output.="<tr>
    <td>{$row['id']}</td>
 
    <td>{$row['Name']}</td>
    <td>{$row['Number']}</td>
    <td><button class='delete-btn'  data-id ='{$row['id']}'> delete</button></td>";
   

}
$output.="</table>";
echo  $output;



}else{
        echo "No record found";
}

?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<div id="outer">
   
    <table border="1" id="table">
        <tr>
            <th>Id</th>
            <th>Name</th>
            <th>Number</th>
        </tr>
    </table>
</div>    


<script src="https://code.jquery.com/jquery-3.6.1.js" ></script>
<script>
    $(document).ready(function () {
        $.ajax({
            url:"fetch_json.php",
            type:"POST",
            dataType:"JSON",
            success:function(data){
               
           $.each(data,function(key,value){
                $('#table').append( "<tr><td>"+value.id+" </td>
<td>" +value.Name+ "</td><td> " +value.Number+ "</tr> " );
         
     

            }
        })
    });
 
</script>
</body>
</html>

Delete.php

<?php
$id=$_POST['id'];
$conn=mysqli_connect("localhost","root","","db_std");
$sql="DELETE  FROM `register_n` WHERE id = {$id}    ";
$query=mysqli_query($conn,$sql);
if($query){
    echo 1;
}else{
    echo 0;
}




?>