jQuery Get/Post


The jQuery's $.get() and $.post() methods provide basic tools to send and retrieve data asynchronously from a web server. Both methods are almost similar, with one significant exception: the $.get() method uses the HTTP GET method, while the $.post() method uses the HTTP POST method to make Ajax requests.

The following is the basic syntax for these methods: 



$.get(URL, data, success);
//  —Or—
$.post(URL, data, success);


The following are the definitions of the parameters in the above syntax:

  • The requisite URL parameter specifies the request's destination URL.
  • The optional data parameter defines a query string (i.e. key/value pairs) that is sent along with the request to the web server.
  • If the request succeeds, the optional success parameter is simply a callback function that is executed. It's usually used to get the data that's been returned.

jQuery is used to make a GET request for AJAX.


The jQuery $.get() method is used in the following example to create an Ajax request to the "date-time.php" file using the HTTP GET method. It simply retrieves the server's date and time and shows it in the browser without having to refresh the tab. 



<!DOCTYPE html>
<html>
<head>
<title>Learning jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
      $.get("date-time.php", function(data){
          // Display the returned data in browser
          $("#result").html(data);
      });
  });
});
</script>
</head>
<body>
    
<div id="result">
<h2>The results content (server date and time) will take place of this Div</h2>
</div>
<button type="button">Load the Date and Time</button>

</body>
</html>
Live Demo!


Here's our "date-time.php" file, which simply displays the server's current date and time. 



<?php
  // Return current date and time from the server
 echo date("F d, Y h:i:s A");
?>


jQuery is used to make a POST request for AJAX.


In jQuery, POST requests are the same as GET requests. So, whether you can use $.get() or $.post() depends largely on the needs of your server-side code. Since GET has a strict data transfer cap, you must use POST if you have a large amount of data to send (e.g. form data). 



<!DOCTYPE html>
<html>
<head>
<title>Learning jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("form").submit(function(event){
    // Stop form from submitting normally
    event.preventDefault();
    /* Serialize the submitted form control values
    to be sent to the web server with the request */
    var formValues = $(this).serialize();
    /* Send the form data using post */
    $.post("display-comment.php", formValues, function(data){
      /* Display the returned data in browser */
      $("#result").html(data);
    });
  });
});
</script>
</head>
<body>
    
<form>
<label>Name: <input type="text" name="name"></label>
<label>Comment: <input name="comment"/></label>
<input type="submit" value="Send">
</form>
<div id="result"></div>

</body>
</html>
Live Demo!


Here's our "display-comment.php" file, which simply displays the data that the user has entered. 



<?php
  $name = htmlspecialchars($_POST["name"]);

  $comment = htmlspecialchars($_POST["comment"]);

  echo "Hi, $name. Received successfully." . "";

  echo "Entered Comments: $comment";
?>