Updated April 7, 2023
Introduction to jQuery Ajax get
The jQuery ajax get() function is used to request the data from the server using the HTTP GET request. The jQuery ajax get() function is a built-in function in jQuery. The ajax get() function is used to make a simple GET request. It may also return the cached data. The ajax() function is used to perform an asynchronous HTTP request to the server, and by using the get() function, it gets the data from the specified URL or server.
The syntax of the jQuery ajax get() function –
$( selector ).get( URL, data, function( data, status, xhr), dataType );Parameters –
URL – This is not an optional parameter. It specifies the location or URL to which the request is sent to get the data.
data – This is an optional parameter. It specifies the data sent to the server.
success( data, status, xhr ) – This is an optional parameter. It specifies the callback function, which will be executed when the sent request is sent susses; it accepts three parameters data, status, and xhr. The data parameter represents the data received from the server. The status parameter represents whether the request is a success, error, and all. The last parameter xhr represents XMLHttpRequest object.
dataType – This is an optional parameter. It specifies the type of data we are expecting to get from the server. It can be “text,” “XML,” “JSON,” “HTML,” “JSONP,” and “Script.”
Return value –
The return value of this function is XMLHttpRequest object.
The working of the ajax get() function
The jQuery ajax get() function accepts four parameters. Suppose we have to do the asynchronous HTTP GET request to get the data from the server. So we can use the ajax get() function with as “$.get(“http://time.jsontest.com”, function(data, status) { $( ‘#p1’ ).append(‘<h3> The json data details is : </h3>’);});”, where the first parameter is the URL from where the data will load.
Examples for the jQuery ajax get() function
Here are the following examples mention below
Example #1
Example of jQuery ajax get() function to get the data by using ajax get() function from the specified URL –
Code:
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<script type = "text/javascript" src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">
</script>
<title> This is an example for jQuery ajax get() function </title>
</head>
<body>
<h3> This an example of jQuery ajax get() function : </h3>
<button id = "btn" > Send the ajax get request. <button/>
<br>
<p style = "color : red" id = "p1"></p>
<script type = "text/javascript">
$(document).ready( function () {
$('#btn').click( function(){
// url from where we want to get the data
$.get("http://time.jsontest.com", function(data, status) {
$( '#p1' ).append( '<h3> The json data details is : </h3>');
$( '#p1' ).append( '<p> Date : ' + data.date + '</p>');
$( '#p1' ).append( '<p> Milliseconds_since_epoch : ' + data.milliseconds_since_epoch + '</p>');
$( '#p1' ).append ('<p> Time: ' + data.time + '</p>');
$( '#p1' ).append( '<p> The request status is : ' + status + '</p>');
});
});
});
</script>
</body>
</html>An output of the above code is –
Once we click on the button, the output is –
In the above code, when we click on the button, the ajax get() function will call which sends the HTTP GET request to the server to get the data. The first parameter mentioned the URL from where the data to get as “$.get(“http://time.jsontest.com”, function(data, status) {$(‘#p1’).append(‘<h3> The json data details is : </h3>’);});”. Next, the received data is displaying as we can see in the above output.
Example #2
Example of jQuery ajax get() function to get the data by using ajax get() function from the specified URL with the chain of predefined function fired on request terminate –
Code:
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<script type = "text/javascript" src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">
</script>
<title> This is an example for jQuery ajax get() function </title>
</head>
<body>
<h3> This an example of jQuery ajax get() function : </h3>
<button id = "btn" > Send the ajax get request. <button/>
<br>
<p style = "color : green" id = "p1"></p>
<script type = "text/javascript">
$(document).ready( function () {
$('#btn').click( function(){
// url from where we want to get the data
var jqxhr =$.get("http://time.jsontest.com", function(data, status) {
$( '#p1' ).append('<h3> The json data details is : </h3>');
$( '#p1' ).append('<p> Date : ' + data.date + '</p>');
$( '#p1' ).append('<p> Milliseconds_since_epoch : ' + data.milliseconds_since_epoch + '</p>');
$( '#p1' ).append('<p> Time: ' + data.time + '</p>');
$( '#p1' ).append('<p> The request status is : ' + status + '</p>');
})
.fail(function() {
alert( "error occur" );
})
.done(function() {
alert( "second success" );
})
.always(function() {
alert( "finished" );
});
jqxhr.always(function() {
alert( "second finished" );
});
});
});
</script>
</body>
</html>An output of the above code is –
Once we click on the “Get p children” button, the output is –
Once we click the ok button, the output is –
Once we click the ok button, the output is –
Once we click the ok button, the output is –
In the above code, when we click on the button, the ajax get() function will call which sends the HTTP GET request to the server to get the data. The first parameter mentioned the URL from where the data to get as “$.get(“http://time.jsontest.com”, function(data, status) {$(‘#p1’.append(‘<h3> The json data details is : </h3>’);});” and also call the chain of predefine function jqXHR.fail() (for error), jqXHR.done() (for success), and jqXHR.always() (for completion, whether success or error), which are automatically fire on the request terminate. Next, the received data is displaying as we can see in the above output.
Conclusion – jQuery Ajax get
The jQuery ajax get() function is a built-in function in jQuery, which is used to request the data from the server using the HTTP GET request.
Recommended Articles
This is a guide to jQuery Ajax get. Here we discuss the working of the ajax get() function along with the examples and outputs. You may also have a look at the following articles to learn more –
