Introduction to JQUERY - Intro to AJAX Part - 2

Guest Posts Paolo Nikko Nuñal

In the previous post, we talked about how we can send data via AJAX using the ajax() method. In this section we are going to deal with the JQUERY.get() and JQUERY.post() method. These two methods have the same function as the ajax() method but more of a specific approach.




Learn HTML5/PHP/AJAX Web Programming from Scratch – An amazing course from Dr. Richard Stibbard. Usually I only promote my own courses, but this course is very impressive, so I cut a deal with Dr. Stibbard … You can also find Richard’s website here





Syntax

post([URL],[DATA],[success([DATA].[TEXTSTATUS],[jqXHR)][,[DATATYPE])

URL - The URL you want to pass the data.

DATA - A plain object or string that is sent to the server.

SUCCESS - (data,textStatus,jqXHR) a callback function that is executed if the request succeeds. Although some of the parameters is optional but the datatype is required and can be null in any case.

DATATYPE - Type of data that you expect from the server. Usually it makes an intelligent guess (xml, json,script,text,html).

Code


<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
   $("#btn-submit).click(function(){
     $.post("check-data.php",
         {
              username: "john_doe24",
              password: "xxx1234"
         },
         function(data,status)
         {
                alert("Data retrieve: " + data );
                alert(status)
         }
     });
});
</script>
</head>
<body>
<button type="text" id="btn-submit>Submit</button>
</body>
</html>


For the PHP Code.

<?php
    $username = $_POST['username'];
    $password = $_POST['password'];

echo "Username is".$username."and Password is:".$password.";
?>


From the code above, the post method calls the check-data.php in which it receives two POST variables which are username and password. After which, whatever you have echo will be returned back to the post() method in which the function receives the echo will be put in the variable "data" and if will return a message whether failed or success with the use of the "status" variable.

As you can see, it is pretty much the same as ajax() method.

Here's is another example using the JQUERY.GET() method.

Code


<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
   $("#btn-submit).click(function(){
     $.get("check-data.php",
         {
              username: "john_doe24",
              password: "xxx1234"
         },
         function(data,status)
         {
                alert("Data retrieve: " + data );
                alert(status)
         }
     });
});
</script>
</head>
<body>
<button type="text" id="btn-submit>Submit</button>
</body>
</html>


There you have it, you can now how to do an AJAX request using the JQUERY.GET() and JQUERY.POST() methods. Although this tutorial does not cover all the parameters but this pretty much gives you an idea how you can do an AJAX call.

For more information you can enroll with Dr. Richard's class to learn more about web development.




Learn HTML5/PHP/AJAX Web Programming from Scratch – An amazing course from Dr. Richard Stibbard. Usually I only promote my own courses, but this course is very impressive, so I cut a deal with Dr. Stibbard … You can also find Richard’s website here