Updated April 6, 2023
Introduction to jQuery ajaxSuccess()
The jQuery ajax success is an ajax event which is only called if the request is successful. The AJAX success is a global event that triggered on the document to call handler function, which may be listening. The ajax success can be performed with the help of the ajaxSuccess() function. The jQuery ajaxSuccess() function is a built-in function in jQuery. The function specified by the ajaxSuccess() function is called when the request is completed unsuccessfully, which is not the same as the ajaxComplete() function.
The syntax of the jQuery ajaxSuccess() function –
$(document).ajaxSuccess(function(event, xhr, options));Parameters –
function(event, xhr, options): This is not an optional parameter. It specifies the callback function, which will be executed when the sent request is completed successfully; it accepts three parameters event, xhr, and options. The event parameter represents the event object. The parameter xhr represents XMLHttpRequest object. The last parameter option represents the options used in the ajax request.
Return value –
The return value of this function is XMLHttpRequest object.
Working of the ajaxSuccess() function
The jQuery ajaxSuccess() function accepts three parameters. Suppose we have to do the asynchronous HTTP GET request to load the data from the server and on the complete of the request (unsuccessfully complete) call the function to display some message to notify the request is completed. So we can use the ajaxSuccess( ) function as $( document ).ajaxSuccess ( function(event, request, settings) { $( “#p2” ).html( “<h1>Request Complete.</h1>”); });”, which display the message “Request Complete” on the successful completion of the request.
Examples for the jQuery ajaxSuccess() function
Example of jQuery ajaxSuccess() function to load the data by using ajax request from the specified location and on successful completion of the request display notification message –
Example #1
Code:
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<title> This is an example for jQuery ajaxSuccess() function </title>
</head>
<body>
<h3> This an example of jQuery ajaxSuccess() function : </h3>
<button id = "btn" > Load and call the ajaxSuccess() function </button>
<br>
<p id = "p1" style = "color : red"> </p>
<p id = "p2" style = "color : red"> </p>
<script type = "text/javascript" language = "javascript">
$( document ).ready( function() {
$( "#btn" ).click( function( event )
{
$( '#p1' ).load( "ajaxfile.html" );
});
$( document ).ajaxSuccess( function( event, request, settings ) {
$( "#p2" ).html( "<h1>Request Complete.</h1>" );
});
});
</script>
</body>
</html>Output:
Once we click on the “Load and call the ajaxSuccess() function” button, the output is –
In the above code, when we click on the button, the load() function will call which sends the ajax request to the server to get the data. The load() function load the data from the server and put the loaded data to the selected element. The load() function parameter mentioned the location with the file name from where the data to get. After the request completed successfully the ajaxSuccess() function display the notification message as $(document).ajaxSuccess( function(event, request, settings) { $(“#p2”).html( “<h1> Request Complete.</h1>”); });”. So, once the ajax request completed successfully the “Request Complete.” Message will be display, as we can see in the above output.
Rewrite the above jQuery ajaxSuccess() function example to load the data by using an ajax request from the specified location and, on successful completion of the request, display the request information –
Example #2
Code:
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<title> This is an example for jQuery ajaxSuccess() function </title>
</head>
<body>
<h3> This an example of jQuery ajaxSuccess() function : </h3>
<button id = "btn" > Load and call the ajaxSuccess() function </button>
<br>
<p id = "p1" style = "color : red"> </p>
<p id = "p2" style = "color : red"> </p>
<script type = "text/javascript" language = "javascript">
$( document ).ready( function() {
$( "#btn" ).click( function( event )
{
$( '#p1' ).load( "ajaxfile.html" );
});
$( document ).ajaxSuccess( function( event, request, settings ) {
$( "#p2" ).html( "The request is :" + JSON.stringify( request) );
});
});
</script>
</body>
</html>Output:
Once we click on the “Load and call the ajaxsuccess() function” button, the output is –
In the above code, when we click on the button, the load() function will call, which sends the ajax request to the server to get the data. The load() function load the data from the server and put the loaded data to the selected element. The load() function parameter mentioned the location with the file name from the data. After the request completed Successfully the ajaxSuccess() function display the request information like whether it the request was successful or not and what was the request its status and all as $(document).ajaxSuccess( function(event, request, settings) { $(“#p2”).html( “The request is :” +JSON.stringify(request) ); });”. So, once the ajax request is completed successfully, the request information will be display; as we can see in the above output, the request is not successful.
Conclusion
The jQuery ajaxSuccess() function is a built-in function in jQuery, which is used to specifies a handler function to be run when the ajax request completes only successfully. Whereas the ajaxComplete() function runs either the request completed successfully or not.
Recommended Articles
This is a guide to jQuery ajaxSuccess(). Here we discuss the Working and Examples for the jQuery ajaxSuccess(). You may also have a look at the following articles to learn more –
