Skip to main content

Ajax in PHP


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";
   }  
?>  
Labels:

Comments

Post a Comment

POST Answer of Questions and ASK to Doubt

Popular posts from this blog

Uncontrolled form input in React-JS

  Uncontrolled form input in React-JS? If we want to take input from users without any separate event handling then we can uncontrolled the data binding technique. The uncontrolled input is similar to the traditional HTML form inputs. The DOM itself handles the form data. Here, the HTML elements maintain their own state that will be updated when the input value changes. To write an uncontrolled component, you need to use a ref to get form values from the DOM. In other words, there is no need to write an event handler for every state update. You can use a ref to access the input field value of the form from the DOM. Example of Uncontrolled Form Input:- import React from "react" ; export class Info extends React . Component {     constructor ( props )     {         super ( props );         this . fun = this . fun . bind ( this ); //event method binding         this . input = React . createRef ();...
Post a Comment
Read more

JDBC using JSP and Servlet

JDBC means Java Database Connectivity ,It is intermediates from Application to database. JDBC has different type of divers and provides to communicate from database server. JDBC contain four different type of approach to communicate with Database Type 1:- JDBC-ODBC Driver Type2:- JDBC Vendor specific Type3 :- JDBC Network Specific Type4:- JDBC Client-Server based Driver  or JAVA thin driver:- Mostly we prefer Type 4 type of Driver to communicate with database server. Step for JDBC:- 1  Create Database using MYSQL ,ORACLE ,MS-SQL or any other database 2   Create Table using database server 3   Create Form according to database table 4  Submit Form and get form data into servlet 5  write JDBC Code:-     5.1)   import package    import java.sql.*     5.2)  Add JDBC Driver according to database ide tools     5.3)  call driver in program         ...
4 comments
Read more

JSP Page design using Internal CSS

  JSP is used to design the user interface of an application, CSS is used to provide set of properties. Jsp provide proper page template to create user interface of dynamic web application. We can write CSS using three different ways 1)  inline CSS:-   we will write CSS tag under HTML elements <div style="width:200px; height:100px; background-color:green;"></div> 2)  Internal CSS:-  we will write CSS under <style> block. <style type="text/css"> #abc { width:200px;  height:100px;  background-color:green; } </style> <div id="abc"></div> 3) External CSS:-  we will write CSS to create a separate file and link it into HTML Web pages. create a separate file and named it style.css #abc { width:200px;  height:100px;  background-color:green; } go into Jsp page and link style.css <link href="style.css"  type="text/css" rel="stylesheet"   /> <div id="abc"> </div> Exam...
Post a Comment
Read more