Ajax in PHP

Author - SHIVA CONCEPT SOLUTION
8/08/2020
0

Ajax means asynchronous javascript and XML, it is used to partially update the content of web page excluding complete page means if we want to submit particular content of web forms then we can use ajax programming.
google search engine is the best example of ajax when we press any key then respective data will be populated under text filed.
Asynchronous means, if we perform operation simultaneously then it is called asynchronous.
JavaScript or Jquery is used to handle an event of ajax form component.
XML is used to send a request to the web server and get a response from the webserver.
Xml use XMLHttpRequest object for request and XMLHttpResponse Object for response.
.......................................................................................................................................
Program of Ajax:-
Now we are creating an autosuggestion box using ajax means when the user will press s char then the respective data of s char will be populated.
Create Design File:-
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
function searchdata(a)
{
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange=function(){
            document.getElementById("res").innerHTML=xmlhttp.responseText;     
}
xmlhttp.open("POST","ajaxexample.php?q="+a,true);
xmlhttp.send();
}

</script>
</head>
<body>
<input type="radio" name="branch" value="CS" onclick="searchdata(this.value)">CS
<br>
<input type="radio" name="branch" value="IT" onclick="searchdata(this.value)">IT
  <div id="res"></div>
</body>
</html>
Write Code on PHP File:-
<?php
$name = $_REQUEST['q']."%";
$conn= mysqli_connect('localhost','root','','php12batch');
$res = mysqli_query($conn,"select * from student where branch like '$name'");
while($x= mysqli_fetch_array($r))
{
  echo $x[0]." ".$x[1] . " ".$x[2]." ".$x[3]. "<br>";
}
?>
Example2 to create autosuggestion using text field:-
Create Design File:-
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
function searchdata(a)
{
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange=function(){
            document.getElementById("res").innerHTML=xmlhttp.responseText;     

}
xmlhttp.open("POST","ajaxexample.php?q="+a,true);
xmlhttp.send();
}

</script>
</head>
<body>
 <input type="text" id="txt1" placeholder="enter any char to search" onkeyup="searchdata(this.value)" />
  <div id="res"></div>
</body>
</html>
Write Code on PHP File:-
<?php
$name = $_REQUEST['q']."%";
$conn= mysqli_connect('localhost','root','','php12batch');
$res = mysqli_query($conn,"select * from student where sname  like '$name'");
while($x = mysqli_fetch_array($res))
{
  echo $x[1],"<hr>";

}
?>
Select Country, State example in AJAX:-
1)  Create the table of Country using countryid,countryname field
2) Create a table for State using stateid, statename, cid where cid will be a foreign key.
3)  Create country.php using the following code:-
<!DOCTYPE html>
<html>
<head>
<title></title>

<script>
     function showstate(a)
     {
      xmlhttp = new XMLHttpRequest();
      xmlhttp.onreadystatechange=function()
        {
             
            document.getElementById("res").innerHTML = xmlhttp.responseText; //response

        }

        xmlhttp.open("POST","state.php?q="+a,true);  //request
        xmlhttp.send();

     }

</script>
</head>
<body>
<h1>Select Country State</h1>
<select name="count" onchange="showstate(this.value)">
<br>
<?php
$conn= mysqli_connect('localhost','root','','php12batch');
$res = mysqli_query($conn,"select * from country");
while($x = mysqli_fetch_array($res))
{ ?>  
  <option value="<?php echo $x[0]; ?>"><?php echo $x[1]; ?></option>
<?php }
?>
</select>
<br>
<div id="res"></div>
</body>
</html>
4)  create code for state.php file
<select name="count">
<br>
<?php
$conn= mysqli_connect('localhost','root','','php12batch');
$cid= $_REQUEST['q'];
$res = mysqli_query($conn,"select * from state where cid=$cid");
while($x = mysqli_fetch_array($res))
{ ?>
    <option value="<?php echo $x[0]; ?>"><?php echo $x[1]; ?></option>
<?php }
?>
</select>

Ajax using Jquery:-
It is the best and easy approach to use Ajax under PHP form, 90% form submission is based on AJAX.
because ajax is much faster as compare to normal form submission.
jquery provide $.ajax() to implement Ajax task in any web technology.
$.ajax({  
              
    type:"POST",  
    url:"filename",  
    data: "input data",  
    success:function(data){  
      output data
         
    }  
      
    }); 
type:-  it can get or post according to the requirement
URL:-  PHP file path where we write program code or database code
data:-  It is used to send data from form filed or other filed means it will work as an Input data
success:-  when ajax task completed then it will execute the success block, we will write output code under success options.
Step by Step Ajax implementation using Jquery:-
Step1st:-
Create .php file and write the following code:-
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" language="javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>  
    <script type="text/javascript" language="javascript">  
  $("#btn").live("click",function(){  
      var fname = $("#fname").val();  
    var lname = $("#lname").val();  
      $.ajax({  
            
    type:"POST",  
    url:"demo.php",  
    data:"fname="+fname+'&lname='+lname,  
    success:function(data){  
       // alert(data);  

       $("#res").html(data);
          
    }        
    });        
});   
</script>  
</head>
<body>
First name: <input type="text" name="fname" id="fname"><br>  
 Last name: <input type="text" name="lname" id="lname"><br>  
 <input type="button" value="Submit" id="btn"> 
 <div id="res"></div> 
</body>
</html>
2)  Create demo.php and write code of PHP 
<?php  
     echo "name is ".$_POST["fname"]."---".$_POST["lname"];  
  ?>  
Another example of Ajax with Jquery using Database:-
1)  Create table Student using rno, name, branch, fees using PHPMyAdmin
2)  Create a design file using .html or .php extension
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" language="javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>  
    <script type="text/javascript" language="javascript">  
  $("#btn").live("click",function(){  
    var rno = $("#rno").val();  
    var fname = $("#fname").val();  
    var lname = $("#lname").val();  
    var fees = $("#fees").val();
          $.ajax({              
    type:"POST",  
    url:"demo.php",  
    data: 'rno='+rno+"&name="+fname+'&branch='+lname+'&fees='+fees,  
    success:function(data){  
       // alert(data);  
       $("#res").html(data);          
    }       
    });        
});    
</script>  
</head>
<body>
 rno:  <input type="text" name="rno" id="rno"><br>  
 name: <input type="text" name="fname" id="fname"><br>  
 branch: <input type="text" name="lname" id="lname"><br> 
 fees:  <input type="text" name="fees" id="fees"><br>  
 <input type="button" value="Submit" id="btn">
 <div id="res"></div> 
</body>
</html>
3)  Create a code file using .php with MySQL database connectivity
<?php       
   $rno = $_REQUEST['rno'];
   $name = $_REQUEST['name'];
   $branch = $_REQUEST['branch'];
   $fees = $_REQUEST['fees'];
   $conn= mysqli_connect('localhost','root','','php12batch');
   $res = mysqli_query($conn,"insert into student(rno,name,branch,fees) values('$rno','$name','$branch','$fees')");
   if(mysqli_affected_rows($conn)>0)   {
    echo "data inserted successfully";
   }
   else
   {
    echo "problem in insertion";
   }  
?>  
Tags
SHIVA CONCEPT SOLUTION

SHIVA CONCEPT SOLUTION

SHIVA CONCEPT SOLUTION is a No.1 Software Training Institute in Indore providing Quality Training Services with Affordable fee structure under the guidance of MR SHIVA GAUTAM, Our Center, Located Strategically at Palasia, Vijaynagar and Indrapuri Bhawarkua.

You may like these posts

Show more

Post a Comment

0Comments

POST Answer of Questions and ASK to Doubt

Post a Comment (0)
Share to other apps
Copy Post Link