Updated April 17, 2023
Introduction to jQuery ajax then
The jQuery ajax then is an ajax event, which is only called if the request resolves, fails, or still in progress. The ajax then is a global event that triggered on the document to call handler function, which may be listening. The ajax then can be performed with the help of the then() function. The jQuery jqXHR.then() function is a built-in function in jQuery. The function is specified by the jqXHR.then() function is called when the request completes, fails, or in progress.
We can use the jqXHR.then() callback function on the JavaScript promise object (the jqXHR object return by the $.ajax() function) to run the specific function on the ajax request. The jqXHR.then() callback function integrate the functionality of the .fail() and .done() functions.
Syntax of jQuery jqXHR.then() function:
jqXHR.then(function(data, status, jqXHR));Parameters:
- function(data, status, jqXHR): This is not an optional parameter. It specifies the callback function executed when the sent request is complete, fails, or in progress. It accepts three parameters data, status, and jqXHR. The data parameter specifies the data return from the server, formatted according to the dataType parameter. The parameter status represents the status of the request. The parameter jqXHR represents the XMLHttpRequest object return by the $.ajax() function.
Working of jqXHR.then() Function
- The jQuery jqXHR.then() function accepts three parameters. Suppose we have to do the asynchronous HTTP GET request to load the data from the server, and on the any status like success or fail of the request, call the function to display some message to notify about the request.
- So we can use the jqXHR.then() function as “ajxReq.then(function(data, status, jqXhr) { $(“p”).append(“<br> Request is Success from then. “); }, function(data, status, jqXhr) {$(“p”).append( “<br> Request is Fail from then() function.”);});”, which will display the specific message on the request success or fail.
Examples of jQuery jqXHR.then()
Given below are the examples of jQuery jqXHR.then():
Example #1
Example of jQuery jqXHR.then() function to call the handler function on the success of the ajax request.
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 then</title>
</head>
<body>
<h3> This an example of jQuery ajax then: </h3>
<button id = "Btn" > Send the ajax request. </button>
<br>
<p style = "color : red"> </p>
<script type = "text/javascript">
$(document).ready( function () {
$('#Btn').click( function(){
// url is correct to get the data
var request = $.ajax( 'http://time.jsontest.com', { dataType: "json" } ),
chained = request.then(function( data ) {
$( "p" ).append( "The request is :" +JSON.stringify( data));
return $.ajax( 'http://time.jsontest.com', { data: { user: data.date } } );
});
});
});
</script>
</body>
</html>Output:
Once we click on the button, the output is:
In the above code, when we click on the button, the ajax() 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, the second parameter mentioned datatype to specify the response is expecting from the server. Next, the jqXHR.then() function is used on the return object of the ajax() function, the jqXHR.then() function runs the handler if the request is successful and displays the received data, as we can see in the output.
Example #2
Example of jQuery jqXHR.then() function to display notification message on the success of the ajax request.
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 then</title>
</head>
<body>
<h3> This an example of jQuery ajax then: </h3>
<button id = "Btn" > Send the ajax request. </button>
<br>
<p style = "color : red"> </p>
<script type = "text/javascript">
$(document).ready( function () {
$('#Btn').click( function(){
// url is correct to get the data, the first handler function of the then() function execute
var ajxReq = $.ajax( 'http://time.jsontest.com', {
contentType : 'application/json',
dataType : 'json'
});
ajxReq.success( function ( data, status, jqXhr ) {
$( "p" ).append( "Request is Success." );
});
ajxReq.error( function ( jqXhr, textStatus, errorMessage ) {
$( "p" ).append( "Request is Fail.");
});
ajxReq.then( function ( data, status, jqXhr ) {
$( "p" ).append( "<br> Request is Success from then. ");
}, function ( data, status, jqXhr ) {
$( "p" ).append( "<br> Request is Fail from then() function." +status);
});
});
});
</script>
</body>
</html>Output:
Once we click on the button, the output is:
In the above code, when we click on the button, the ajax() function will call, which sends the HTTP GET request to the server to get the data. The first parameter is the URL from where the data to get; the second parameter is the datatype to specify the response is expecting from the server. Next, the jqXHR.then() function is used on the return object of the ajax() function. The jqXHR.then() function has two handler functions; the first handler function executes if the request is successful, and the second handler function executes if the request fails. As in the above case, the request is successful, so the first handler function executes and displays the respective message, as we can see in the output.
Example #3
Rewrite the above program 2 to display notification message on fail of the ajax request.
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 then</title>
</head>
<body>
<h3> This an example of jQuery ajax then: </h3>
<button id = "Btn" > Send the ajax request. </button>
<br>
<p style = "color : red"> </p>
<script type = "text/javascript">
$(document).ready( function () {
$('#Btn').click( function(){
// url is incorrect to get the data, so, the second handler function of the then() function execute
var ajxReq = $.ajax( 'http://jsontest.com', {
contentType : 'application/json',
dataType : 'json'
});
ajxReq.success( function ( data, status, jqXhr ) {
$( "p" ).append( "Request is Success." );
});
ajxReq.error( function ( jqXhr, textStatus, errorMessage ) {
$( "p" ).append( "Request is Fail.");
});
ajxReq.then( function ( data, status, jqXhr ) {
$( "p" ).append( "<br> Request is Success from then. ");
}, function ( data, status, jqXhr ) {
$( "p" ).append( "<br> Request is Fail from then() function." +status);
});
});
});
</script>
</body>
</html>Output:
Once we click on the button, the output is:
In the above code, the request is failed, so the second handler function is executed and displays the fail message from the jqXHR.then() function, as we can see in the output.
Conclusion – jQuery ajax then
The jQuery jqXHR.then() function is a built-in function in jQuery, which is used to specifies a specific handler function to be run when the ajax request success, fails, or in progress.
Recommended Articles
This is a guide to jQuery ajax then. Here we discuss the introduction, working of jqXHR.then() function and examples respectively. You may also have a look at the following articles to learn more –
