$.get() and $.post() MethodsThe jQuery $.get() and $.post() methods are tools provided by jQuery to asynchronously send and retrieve data from a web server. Both methods are quite similar, with one key distinction: $.get() uses the HTTP GET method for Ajax requests, while $.post() uses the HTTP POST method.
Here's the basic syntax for these methods:
The parameters in the syntax above are used as follows:
Note: The HTTP GET and POST methods are essential for sending requests from a browser to a server. The primary distinction between these methods lies in how they transmit data to the server. For a detailed explanation and comparison between these two methods, refer to the tutorial on GET and POST methods.
The example below demonstrates how to use the jQuery $.get() method to perform an Ajax request to the "date-time" file using the HTTP GET method. It retrieves the date and time from the server and displays it in the browser dynamically, without needing to refresh the entire page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery get() Demo</title>
<script src="https://code.jquery.com/jquery-3.5.1.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>Content of the result DIV box will be replaced by the server date and time</h2>
</div>
<button type="button">Load Date and Time</button>
</body>
</html>Here's our "date-time" file that simply outputs the current date and time of the server.
<?php
// Return current date and time from the server
echo date("F d, Y h:i:s A");
?>Tip: If you encounter any difficulties running these examples locally on your PC, please refer to the tutorial on jQuery Ajax load for solutions.
You can also send additional data to the server with the request. In the following example, the jQuery code makes an Ajax request to the "create-table" and sends some extra data along with the request.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery get() Demo</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
// Get value from input element on the page
var numValue = $("#num").val();
// Send the input data to the server using get
$.get("create-table", {number: numValue} , function(data){
// Display the returned data in browser
$("#result").html(data);
});
});
});
</script>
</head>
<body>
<label>Enter a Number: <input type="text" id="num"></label>
<button type="button">Show Multiplication Table</button>
<div id="result"></div>
</body>
</html>Here's the PHP script for our "create-table" file, which simply outputs the multiplication table for the number entered by the user upon button click.
<?php
$number = htmlspecialchars($_GET["number"]);
if(is_numeric($number) && $number > 0){
echo "<table>";
for($i=0; $i<11; $i++){
echo "<tr>";
echo "<td>$number x $i</td>";
echo "<td>=</td>";
echo "<td>" . $number * $i . "</td>";
echo "</tr>";
}
echo "</table>";
}
?>POST requests in jQuery are very similar to GET requests. The choice between $.get() and $.post() depends largely on the requirements of your server-side code. If you need to transmit a large amount of data, such as form data, you should use POST because GET requests have strict limits on data transfer.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery post() Demo</title>
<script src="https://code.jquery.com/jquery-3.5.1.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", 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: <textarea cols="50" name="comment"></textarea></label>
<input type="submit" value="Send">
</form>
<div id="result"></div>
</body>
</html>Below is our "display-comment" file, designed to display the data input by the user.
<?php
$name = htmlspecialchars($_POST["name"]);
$comment = htmlspecialchars($_POST["comment"]);
echo "Hi, $name. Your comment has been received successfully." . "
";
echo "Here's the comment what you've entered: $comment";
?>Now that you have learned how to perform different Ajax operations such as loading data and submitting forms asynchronously using jQuery, before concluding this chapter, explore another classic example of Ajax. This example demonstrates how to dynamically populate the state or city dropdown based on the selection made in the country dropdown using jQuery.