Jquery Ajax Examples

Posted on  by admin

The jQuery ajaxComplete() function is used to specifies a handler function to be run when the ajax request completes.

Send Ajax Request

The jQuery ajaxComplete() function is a built in function in jQuery. The function specified by the ajaxComplete() function is called either the ajax request completed, even if completed unsuccessfully, which is not the same with the ajaxSuccess() function.

The syntax of the jQuery ajaxComplete() function –. URL – This is not an optional parameter. It specifies the location or URL to which the request is sent to get the data.

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. 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. The return value of this function is XMLHttpRequest object. The jQuery ajaxComplete() 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 (may be successfully complete or unsuccessfully complete) call the function to display some message to notify the request is completed.
So we can use the ajaxComplete() function as $( document ).ajaxComplete( function(event, request, settings) { $( “#p2” ).html( “

Request Complete.

”); });”, which display the message “Request Complete” on the completion of the request.
Here are the following examples mention below. Example of jQuery ajaxComplete() function to load the data by using ajax request from the specified location and on completion of the request display notification message –.
jQuery Training (8 Courses, 5 Projects)8 Online Courses | 5 Hands-on Projects | 28+ Hours | Verifiable Certificate of Completion | Lifetime Access 4.5 (8,812 ratings).
Related Courses. Java Servlet Training (6 Courses, 12 Projects)JavaFX Training (1 Courses).
An output of the above code is –.
Once we click on the “Load and call the ajaxcomplete() 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 the ajaxComplete() function display the notification message as $(document).ajaxComplete( function(event, request, settings) { $(“#p2”).html( “

Request Complete.

”); });”.
So, once the ajax request completed the “Request Complete.” Message will be display, as we can see in the above output.
Rewrite the above jQuery ajaxComplete() function example to load the data by using an ajax request from the specified location and, on completion of the request, display the request information –.
An output of the above code is –. Once we click on the “Load and call the ajaxcomplete() 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 the ajaxComplete() function display the request informations like whether it the request was successful or not and what was the request its status and all as $(document).ajaxComplete( function(event, request, settings) { $(“#p2”).html( “The request is :” +JSON.stringify(request) ); });”.
So, once the ajax request is completed, the request information will be display; as we can see in the above output, the request is not successful.
The jQuery ajaxComplete() function is a built-in function in jQuery, which specifies a handler function to be run when the ajax request completes either successfully unsuccessfully.
Whereas the ajaxSuccess() function runs only if the ajax request completes.
This is a guide to jQuery ajax complete. Here we discuss the Working and Examples for the jQuery ajaxComplete() function.
You may also have a look at the following articles to learn more –.

Recommended Articles

The jQuery ajax() method provides core functionality of Ajax in jQuery. It sends asynchronous HTTP requests to the server.

Conclusion – jQuery ajax complete

Parameter description:. url: A string URL to which you want to submit or retrieve the data.

JQuery AJAX Events

options: Configuration options for Ajax request. An options parameter can be specified using JSON format. This parameter is optional. The following table list all the options available for configuring Ajax request. Let's see how to send http requests using $.ajax() (or jQuery.ajax()) method.

The ajax() methods performs asynchronous http request and gets the data from the server. The following example shows how to send a simple Ajax request. In the above example, first parameter '/getData' of ajax() method is a url from which we want to retrieve the data.

  • By default ajax() method performs http GET request if option parameter does not include method option.
  • The second parameter is options parameter in JSON format where we have specified callback function that will be executed when request succeeds.
  • You can configure other options as mentioned in the above table.
  • The following example shows how to get the JSON data using ajax() method.
  • In the above example, first parameter is a request url which will return JSON data.
In the options parameter, we have specified dataType and timeout options. The dataType option specifies the type of response data, in this case it is JSON.

The timeout parameter specifies request timeout in milliseconds. We have also specified callback functions for error and success.

Introduction to jQuery ajax complete

The ajax() method returns an object of jQuery XMLHttpRequest. The following example shows how to use jQuery XMLHttpRequest object.

Additional Notes:

jQuery AJAX Example

What is AJAX?

The ajax() method can send all type of http requests. The following example sends http POST request to the server. In the above example, first parameter is a url which is used to submit the data. In the options parameter, we have specified a type option as a POST, so ajax() method will send http POST request.

Also, we have specified data option as a JSON object containing data which will be submitted to the server.

JQuery AJAX Methods

So this way you can send GET, POST or PUT request using ajax() method. Visit jQuery documentation to know more about ajax() method. $.ajax() method allows you to send asynchronous http requests to submit or retrieve data from the server without reloading the whole page.

Working of the ajaxComplete() function

$.ajax() can be used to send http GET, POST, PUT, DELETE etc. It can retrieve any type of response from the server. Syntax: $.ajax(url,[options]).

How to pass parameters in GET requests with jQuery

Use option parameter to customize ajax request as per your need. jQuery Tutorial. jQuery DOM Manipulation. jQuery CSS Manipulation. jQuery References. jQuery Useful Resources.

Selected Reading. AJAX is an acronym standing for Asynchronous JavaScript and XML and this technology helps us to load data from the server without a browser page refresh.

Example

If you are new with AJAX, I would recommend you go through our Ajax Tutorial before proceeding further. JQuery is a great tool which provides a rich set of AJAX methods to develop next generation web application.

This is very easy to load any static or dynamic data using JQuery AJAX. JQuery provides load() method to do the job −.

Ajax call rest API with parameters

Here is the simple syntax for load() method −. Here is the description of all the parameters −.

Real-time Example

URL − The URL of the server-side resource to which the request is sent. It could be a CGI, ASP, JSP, or PHP script which generates data dynamically or out of a database.

Examples for the jQuery ajaxComplete() function

data − This optional parameter represents an object whose properties are serialized into properly encoded parameters to be passed to the request.

Passing Data to the Server

If specified, the request is made using the POST method. If omitted, the GET method is used. callback − A callback function invoked after the response data has been loaded into the elements of the matched set. The first parameter passed to this function is the response text received from the server and second parameter is the status code. Consider the following HTML file with a small JQuery coding −.

Here load() initiates an Ajax request to the specified URL /jquery/result.html file. After loading this file, all the content would be populated inside

tagged with ID stage.

Assuming, our /jquery/result.html file has just one HTML line −. When you click the given button, then result.html file gets loaded. There would be a situation when server would return JSON string against your request.

jQuery AJAX Methods

JQuery utility function getJSON() parses the returned JSON string and makes the resulting string available to the callback function as first parameter to take further action. Here is the simple syntax for getJSON() method −. Here is the description of all the parameters −. URL − The URL of the server-side resource contacted via the GET method.

data − An object whose properties serve as the name/value pairs used to construct a query string to be appended to the URL, or a preformatted and encoded query string. callback − A function invoked when the request completes. The data value resulting from digesting the response body as a JSON string is passed as the first parameter to this callback, and the status as the second.

Consider the following HTML file with a small JQuery coding −.

  • Here JQuery utility method getJSON() initiates an Ajax request to the specified URL result.json file.
  • After loading this file, all the content would be passed to the callback function which finally would be populated inside
    tagged with ID stage.
  • Assuming, our result.json file has following json formatted content −.

Loading Simple Data

When you click the given button, then result.json file gets loaded. Many times you collect input from the user and you pass that input to the server for further processing.

Syntax

JQuery AJAX made it easy enough to pass collected data to the server using data parameter of any available Ajax method. This example demonstrate how can pass user input to a web server script which would send the same result back and we would print it −.

Here is the code written in result.php script −. Now you can enter any text in the given input box and then click "Show Result" button to see what you have entered in the input box.

Sending Data to the Server

You have seen basic concept of AJAX using JQuery. Following table lists down all important JQuery AJAX methods which you can use based your programming need −. You can call various JQuery methods during the life cycle of AJAX call progress.

Based on different events/stages following methods are available −. You can go through all the AJAX Events. 27 Lectures 1 hours . 27 Lectures 1.5 hours . 72 Lectures 4.5 hours . Frahaan Hussain. 60 Lectures 9 hours .

Eduonix Learning Solutions. 17 Lectures 2 hours . Sandip Bhattacharya. 12 Lectures 53 mins. Laurence Svekis. AJAX is the art of exchanging data with a server, and updating parts of a web page - without reloading the whole page. Try it Yourself ».

AJAX = Asynchronous JavaScript and XML. In short; AJAX is about loading data in the background and display it on the webpage, without reloading the whole page. Examples of applications using AJAX: Gmail, Google Maps, Youtube, and Facebook tabs.

Data Types

You can learn more about AJAX in our AJAX tutorial. jQuery provides several methods for AJAX functionality. With the jQuery AJAX methods, you can request text, HTML, XML, or JSON from a remote server using both HTTP Get and HTTP Post - And you can load the external data directly into the selected HTML elements of your web page!

Without jQuery, AJAX coding can be a bit tricky!Writing regular AJAX code can be a bit tricky, because different browsers have different syntax for AJAX implementation.

This means that you will have to write extra code to test for different browsers.

However, the jQuery team has taken care of this for us, so that we can write AJAX functionality with only one single line of code.

jQuery.ajax( url [, settings ] )Returns: jqXHR