Post
Ask Question

How to Use jQuery Ajax Call in PHP Script

Asynchronous JavaScript and XML (AJAX) is a format for better and faster response that is more user-friendly. AJAX can be used for interactive communication with a database. Ajax is for browser-based applications. Independent platform applications are used by Ajax. AJAX is used to transfer data between the browser and the web server. The following are methods that use Ajax.
 
beforeSend: When we send a request to the server then before that the beforeSend function will excute.
  1. <script type="text/javascript" language="javascript">  
  2.   
  3.    $("#btn").live("click",function(){  
  4.       var fname = $("#fname").val();  
  5.       var lname = $("#lname").val();  
  6.       $.ajax({  
  7.          type:"POST",  
  8.          url:"demo.php",  
  9.          data:"fname="+fname+'&lname='+lname,  
  10.          beforeSend: function(data){  
  11.             alert("this test");  
  12.          }  
  13.       });  
  14.    });  
  15.   
  16. </script>  
Complete: If the request successfully executed when the request finishes.
  1. <script type="text/javascript" language="javascript">  
  2.   
  3.    $("#btn").live("click",function(){  
  4.       var fname = $("#fname").val();  
  5.       var lname = $("#lname").val();  
  6.       $.ajax({  
  7.          type:"POST",  
  8.          url:"demo.php",  
  9.          data:"fname="+fname+'&lname='+lname,  
  10.          complete:function(data){  
  11.             alert(data);  
  12.          }  
  13.       });  
  14.    });  
  15.   
  16. </script>  
Data: Which data (string) value will be sent to the server.
  1. <script type="text/javascript" language="javascript">  
  2.   
  3.    $("#btn").live("click",function(){  
  4.       var fname = $("#fname").val();  
  5.       var lname = $("#lname").val();  
  6.       $.ajax({  
  7.          type:"POST",  
  8.          url:"demo.php",  
  9.          data:"fname="+fname+'&lname='+lname,  
  10.       });  
  11.    });  
  12.   
  13. </script>  
Success: When this function is executed if the request succeeds.
  1. <script type="text/javascript" language="javascript">  
  2.   
  3.    $("#btn").live("click",function(){  
  4.       var fname = $("#fname").val();  
  5.       var lname = $("#lname").val();  
  6.       $.ajax({  
  7.          type:"POST",  
  8.          url:"demo.php",  
  9.          data:"fname="+fname+'&lname='+lname,  
  10.          success:function(data){  
  11.             alert(data);  
  12.          }  
  13.       });  
  14.    });  
  15.   
  16. </script>  
type This is used to send data to a GET or POST method. The default value is GET.

POST method 
  1. <script type="text/javascript" language="javascript">  
  2.   
  3.    $("#btn").live("click",function(){  
  4.       var fname = $("#fname").val();  
  5.       var lname = $("#lname").val();  
  6.       $.ajax({  
  7.          type:"POST",  
  8.          url:"demo.php",  
  9.          data:"fname="+fname+'&lname='+lname,  
  10.          success:function(data){  
  11.             alert(data);  
  12.          }  
  13.       });  
  14.    });  
  15.   
  16. </script>  
GET method
  1. <script type="text/javascript" language="javascript">  
  2.   
  3.    $("#btn").live("click",function(){  
  4.       var fname = $("#fname").val();  
  5.       var lname = $("#lname").val();  
  6.       $.ajax({  
  7.          type:"GET",  
  8.          url:"demo.php",  
  9.          data:"fname="+fname+'&lname='+lname,  
  10.          success:function(data){  
  11.             alert(data);  
  12.          }  
  13.       });  
  14.    });  
  15.   
  16. </script>  
url: Which the request is sent.
  1. <script type="text/javascript" language="javascript">  
  2.   
  3.    $("#btn").live("click",function(){  
  4.       var fname = $("#fname").val();  
  5.       var lname = $("#lname").val();  
  6.       $.ajax({  
  7.          type:"POST",  
  8.          url:"demo.php",  
  9.          data:"fname="+fname+'&lname='+lname,  
  10.          success:function(data){  
  11.             alert(data);  
  12.          }  
  13.       });  
  14.    });  
  15.   
  16. </script>  

Step 1: Create a two file index.php 

/ajax code
 
  1. <script type="text/javascript" language="javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>  
  2. <script type="text/javascript" language="javascript">  
  3.   
  4. $("#btn").live("click",function(){  
  5.       
  6.       
  7.     var fname = $("#fname").val();  
  8.     var lname = $("#lname").val();  
  9.       
  10.     $.ajax({  
  11.               
  12.     type:"POST",  
  13.     url:"demo.php",  
  14.     data:"fname="+fname+'&lname='+lname,  
  15.     success:function(data){  
  16.         alert(data);  
  17.           
  18.     }  
  19.       
  20.     });  
  21.       
  22. });  
  23.   
  24. </script>  
  25.   
  26.  First name: <input type="text" name="fname" id="fname"><br>  
  27.  Last name: <input type="text" name="lname" id="lname"><br>  
  28.  <input type="button" value="Submit" id="btn">  
Step 2:  Create a Demo.php file

ajax
  1. <?php  
  2.   
  3.    echo $_POST["fname"]."---".$_POST["lname"];  
  4.   
  5. ?>  
Output

program output


Similar Articles