CHAMPTUTORIAL

CHAMPION KAY TUTORIAL

Basic Ajax usage with jQuery

Posted by champtutorial On Thursday 8 September 2011 0 comments


in this article we will be talking about the basic usage of Ajax with jQuery 1.4.2 production (24KB, Minified and Gzipped).
In order to use the JavaScript examples in this article, you should first download jQuery and include it on your page using:





view plainprint?




    

  1. <script type="text/javascript" src="jquery-1.4.2.js"></script>  
    2.
Throughout this article our Ajax scripts will communicate with ‘serverscript.php‘ our Server script.





view plainprint?




    

  1. <?php  
    2. 

  2. if(isset($_POST['firstname']) &&  
    3. 

  3.    isset($_POST['lastname'])) {  
    4. 

  4.  echo "Hey {$_POST['firstname']} {$_POST['lastname']}, 
    5. 

  5.    you rock!\n(repsonse to your POST request)";  
    6. 

  6. }  
    7. 

  7. if(isset($_GET['firstname']) &&  
    8. 

  8.    isset($_GET['lastname'])) {  
    9. 

  9.  echo "Hey {$_GET['firstname']} {$_GET['lastname']}, 
    10. 

  10.    you rock!\(response to your GET request)";  
    11. 

  11. }  
    12. 

  12. ?>  
    13.
Method One – POST (Asynchronous with data):
Transfer data to the server (using POST method), and retrieve a response:





view plainprint?




    

  1. function doAjaxPost() {  
    2. 

  2.  $.ajax({  
    3. 

  3.    type: "POST",  
    4. 

  4.    url: "serverscript.php",  
    5. 

  5.    data: "firstname=clint&lastname=eastwood",  
    6. 

  6.    success: function(resp){  
    7. 

  7.      // we have the response  
    8. 

  8.      alert("Server said:\n '" + resp + "'");  
    9. 

  9.    },  
    10. 

  10.    error: function(e){  
    11. 

  11.      alert('Error: ' + e);  
    12. 

  12.    }  
    13. 

  13.  });  
    14. 

  14. }  
    15. 

  15.   
    16. 

  16. doAjaxPost();  
    17.
Method Two – GET (Asynchronous with data):
Transfer data to the server (using GET method), and retreive a response:





view plainprint?




    

  1. function doAjaxGet() {  
    2. 

  2.  $.ajax({  
    3. 

  3.    type: "GET",  
    4. 

  4.    url: "serverscript.php",  
    5. 

  5.    data: "firstname=clint&lastname=eastwood",  
    6. 

  6.    success: function(resp){  
    7. 

  7.      // we have the response  
    8. 

  8.      alert("Server said:\n '" + resp + "'");  
    9. 

  9.    },  
    10. 

  10.    error: function(e){  
    11. 

  11.      alert('Error: ' + e);  
    12. 

  12.    }  
    13. 

  13.  });  
    14. 

  14. }  
    15. 

  15.   
    16. 

  16. doAjaxGet();  
    17.
Note that GET is the default type for Ajax calls using jQuery, so we really do not need to explicitly state it, but I’ve placed it there just for clarity.
Practical jQuery Example using POST:





view plainprint?




    

  1. <html>  
    2. 

  2. <head>  
    3. 

  3.   
    4. 

  4. <script type="text/javascript" src="jquery-1.4.2.js"></script>  
    5. 

  5. </head>  
    6. 

  6. <body>  
    7. 

  7.   <script>  
    8. 

  8. function doAjaxPost() {  
    9. 

  9.  // get the form values  
    10. 

  10.  var field_a = $('#field_a').val();  
    11. 

  11.  var field_b = $('#field_b').val();  
    12. 

  12.   
    13. 

  13.  $.ajax({  
    14. 

  14.    type: "POST",  
    15. 

  15.    url: "serverscript.php",  
    16. 

  16.    data: "firstname="+field_a+"&lastname="+field_b,  
    17. 

  17.    success: function(resp){  
    18. 

  18.      // we have the response  
    19. 

  19.      alert("Server said:\n '" + resp + "'");  
    20. 

  20.    },  
    21. 

  21.    error: function(e){  
    22. 

  22.      alert('Error: ' + e);  
    23. 

  23.    }  
    24. 

  24.  });  
    25. 

  25. }  
    26. 

  26. </script>  
    27. 

  27.   
    28. 

  28. First Name:  
    29. 

  29. <input type="text" id="field_a" value="Sergio">  
    30. 

  30. Last Name:  
    31. 

  31. <input type="text" id="field_b" value="Leone">  
    32. 

  32. <input type="button" value="Ajax Request" onClick="doAjaxPost()">  
    33. 

  33.   
    34. 

  34. </body>  
    35. 

  35. </html>  
    36.

Labels:

0 comments:

Post a Comment