Easy To Learn jQuery AJAX get() and post() Methods

jQuery AJAX get() and post() Methods

The jQuery AJAX get() and post() methods are used to request data from the server with an HTTP GET or POST methods .

HTTP Request: GET vs. POST

The jQuerys ajax two commonly used methods for a send and retrieve data asynchronously from a client and web server.

GET : jQuery get() method is requests data from a specified resource

POST : jQuery post() method is submits data to be processed to a specified resource

Both the methods are pretty much identical, apart from one major difference : the $.get() makes Ajax requests using the HTTP GET method, whereas the $.post() makes Ajax requests using the HTTP POST method.

jQuery $.get() Method

The $.get() method requests data from the server with an HTTP GET request.

Syntax

$.get(URL,callback);

The above syntax have the following meaning :

The required URL parameter specifies the URL to which the request.
The optional data parameter specifies a set of query string (i.e. key/value pairs) that is sent to the web server along with the request.
The optional callback parameter is the name of a function to be executed if the request succeeds. It is typically used to retrieve the returned data.

The following example uses the jQuery $.get() method to make an Ajax request to the "get-demo.php" file using HTTP GET method. It simply retrieves the date and time returned from the server and displays it in the browser without refreshing the page.

Include File : get-demo.php

<?php

date_default_timezone_set('Asia/Kolkata');

$date = date("j-F-Y : h:i A");

.color{ color:#0099da;}

</style>

<h3>

Current Date & Time is : <span class="color"><?php echo $date ?></span>

</h3>

<!DOCTYPE html>
<html>
<head>
<title>jQuery Ajax $.get() Method</title>
<script src="js/jquery-3.2.1.min.js"></script>  
<script type="text/javascript">
$(document).ready(function(){
    $("button").click(function(){
        $.get("get-demo.php", function(data, status){
            $("#get_demo").html(data);
                 alert("Status: " + status);
        });
    });
});
</script>
<style type="text/css">
.btn{ padding:6px 15px;}
</style>
</head>
 
<body>
    <div id="get_demo">
        <h3>jQuery AJAX get() Method. Load the content and replaced in samepage.</h3>
    </div>
    <button type="button" class="btn">Click Here (Date & Time)</button>
</body>
</html>  
 
</head>
<body>

Output :

jQuery $.post() Method

The $.post() method requests data from the server using an HTTP POST request.

Syntax :

$.post(URL,data,callback);

The required URL parameter specifies the URL you wish to request.
The optional data parameter specifies some data to send along with the request.
The optional callback parameter is the name of a function to be executed if the request succeeds.

POST requests are identical to GET requests in jQuery. So, generally which method you should use either $.get()or $.post() is basically depends on the requirements of your server-side code. The following example uses the $.post() method to send some data along with the request :

Include File : post-demo.php

<?php

$name = $_POST["name"];

$comment = $_POST["comment"];

echo "Hi <b><em>$name</em></b>. Your comment has been successfully received." . "<br>";

echo "You've entered comment is : <b><em> $comment </em></b>";

<!DOCTYPE html>
<html>
<head>
<title>jQuery Ajax $.post() Method</title>
<script src="js/jquery-3.2.1.min.js"></script>  
<script type="text/javascript">
$(document).ready(function(){
    $("form").submit(function(event){
        event.preventDefault();
var actionFile = $(this).attr("action");
        var formValues = $(this).serialize();
        $.post(actionFile, formValues, function(data){
            $("#my_result").html(data);
        });
    });
});
</script>
<style type="text/css">
.btn{ padding:6px 15px;}
.lable{font-size:14px; font-weight:bold; font-style:italic; clear:both;}
.custon_form{border-radius:3px; margin:5px 0px;}
.result{margin:15px 0px 5px; }
</style>
</head>
 
<body>
    <form action="post-demo.php">
        <label class="lable">Name:</label> <br>
        <input type="text" name="name" class="custon_form" required /><br>
        <label class="lable">Comment: </label><br>
        <textarea rows="4" cols="50" name="comment" class="custon_form" required></textarea><br>
        <input type="submit" class="btn" value="Send">
    </form>
    <div id="my_result" class="result"></div>
</body>
</html>

Output :

jQuery Tutorial