jquery
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"); 
?>
<style type="text/css">
.color{ color:#0099da;}
</style>
<h3>
 Current Date &amp; 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 :