if you don’t already know what’s AJAX you can check my previous post about : what’s AJAX ?

Starting Jquery AJAX

jquery framework , offers an easy ways to make AJAX calls , alot easier than normal Javascript AJAX

1. “$.get” to handle Get request :

beginning with  some HTML to apply AJAX on  write this in a file called index.html

<body>
<button id="ajaxButton">Click me </button>
<div id = "datahere" style="width:200px; height:200px; background-color:Blue ; ">
</div></body>

make a php Page and call it default.php  , containing this code the response of the PHP page is a Text Box

<?php  echo"<input type="text" /> ; ?>

now to the Jquery Part in the file index.html 

$(document).ready(function () {  
  $("#ajaxButton").click(function () {              
     $.get("default.php", function (data) {        
       $("datahere").html(data);  
       $("datahere").html(data);              
       alert(" request is sent sucessfully ");          
     });          
   });      
});
  • . ready is used to execute the code below after the document is Ready
  • attaching a click event on the button
  • $.get  takes two arguments -till now-

  1. the link to the server page to which the request will be sent
  2. call back function executed after the response comes  this call back function takes an argument called data which contains , the response of the server page  (ie : data variable is a string contains the response -the text box in this case – )
  • $(“datahere”).html(data);   // to load the write into the DIV

BY EXECUTION , THE TEXT box will appear inside the Blue box

 

 

 

 

 

 

 

 

till now you can download the Source Files from here : download the source code #1

NEXT PHASE , Sending data in the AJAX Request :

changing alittle bit to the Javascript :

$(document).ready(function () {  
  $("#ajaxButton").click(function () {              
     $.get("default.php",{"name":"hady","age":"20"} , function (data) {        
       $("datahere").html(data);  
       $("datahere").html(data);              
       alert(" request is sent sucessfully ");          
     });          
   });      
});

and changing the PHP code

<?php 
echo "name is".$_GET['name']."<br/> age is : ".$_GET['age'] ;
 ; ?>
  • now we noticed here is that the $.get function takes a middle argument which is a JSON object
  • we can get the value of the sent Json attributes by function  $_GET[”the name of the attribute”] in the PHP code lines

the output will be like this :

 

 

 

 

 

 

 

 

you can download the code lines till now from here : download the source code #2

2. “$.POST” to handle POST request :

actually $.post is simillar to $.get  in everything so no need for repetition  the only difference it it’s responsible for post request to the server and $.get is responsible for the get request

if you don’t know the difference between post and get check this link .

those are not all the Jquery methods to send an AJAX request  acutally there are others that ease sending and requesting of a special kind of data ( JSON , FORM , Javascript …etc )

more will be Explained in Next posts so Stay tuned