[selector]. load( URL, [data], [callback] );

 The jQuery Example  type = "text/javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" >  type = "text/javascript" language = "javascript" > $ ( document ). ready ( function () { $ ( "#driver" ). click ( function ( event ){ $ ( '#stage' ). load ( './result.html' ); }); }); 

 Click on the button to load result.html file −  id = "stage" style = " background - color : cc0 ; " > STAGE 

type="button"id="driver"value="Load Data"/>

Here, load () initializes an AJAX request to the specified file URL. / Result.html . After downloading this file, all content will be brought into the element

THIS IS RESULT .

When you click on the given button, then result.html is loaded.

Get JSON data in jQuery

There may be a situation when the server will return JSON string for your request. The jQuery getJSON () utility function analyzes the returned JSON string and creates the resulting string for the callback function as the first parameter to perform further actions.

Syntax

The syntax of the getJSON () method in jQuery is:

 [selector]. getJSON( URL, [data], [callback] );

Below is a detailed description of the parameters:

URL - The URL of the Server-Side source is connected via the GET method.

data - An object whose properties provide name / value pairs that are used to construct a query string to be linked to a URL, or a query string formatted and pre-encoded.

callback - A function called when the Request is completed. The data value resulting from the body analysis must revert as a jQuery string passed as the first parameter to this callback, and the state is second.

For example

You consider the following HTML file with a small jQuery code:

 The jQuery Example  type = "text/javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" >  type = "text/javascript" language = "javascript" > $ ( document ). ready ( function () { $ ( "#driver" ). click ( function ( event ){ $ . getJSON ( './result.json' , function ( jd ) { $ ( '#stage' ). html ( ' 

Name: '

 + jd . name + '' ); $ ( '#stage' ). append ( ' 

Age: '

 + jd . age + '' ); $ ( '#stage' ). append ( ' 

Sex: '

 + jd . sex + '' ); }); }); }); 

 Click on the button to load result.json file −  id = "stage" style = " background - color :# eee ; " > STAGE  type = "button" id = "driver" value = "Load Data" /> 

Here, the getJSON () utility method in jQuery initializes an AJAX Request to the file URL specified as result.json. After downloading this file, all content will be transmitted to the callback function that will eventually be brought inside the element

 { 
 "name": "Zara Ali", 
 "age": "67", 
 "sex": "female" 
 } 

Transfer data to Server in jQuery

Sometimes you collect input from the user and you pass these inputs to the server to perform further processing. jQuery AJAX makes it easy enough to pass the collected data to the Server using the data parameter of any available Ajax method.

For example

This example illustrates how to pass input from a user to a WebServer that will send the results back and we will print it out:

 The jQuery Example  type = "text/javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" >  type = "text/javascript" language = "javascript" > $ ( document ). ready ( function () { $ ( "#driver" ). click ( function ( event ){ var name = $ ( "#name" ). val (); $ ( "#stage" ). load ( '/jquery/result.php' , { "name" : name } ); }); }); 

 Enter your name and click on the button:  type = "input" id = "name" size = "40" />  />  id = "stage" style = " background - color : cc0 ; " > STAGE  type = "button" id = "driver" value = "Show Result" /> 

Here is the code written in result.php script:;

  php if ( $_REQUEST [ "name" ] ) { $name = $_REQUEST [ 'name' ]; echo "Welcome " . $name ; } ?> 

Now, you can enter any text into the given input box and then click the Show Result button to see what you entered in the Input box.

JQuery AJAX methods

You have seen AJAX's concept using jQuery. The following table lists all the jQuery AJAX methods you can use according to your requirements:

Formula & Description1 jQuery.ajax (options)

Download a remote page using an HTTP Request

2 jQuery.ajaxSetup (options)

Setup global settings for AJAX Request

3 jQuery.get (url, [data], [callback], [type])

Downloading a remote page by using an HTTP GET Request

4 jQuery.getJSON (url, [data], [callback])

Download JSON data using an HTTP GET Request

5 jQuery.getScript (url, [callback])

Download and execute a JavaScript file using an HTTP GET request.

6 jQuery.post (url, [data], [callback], [type])

Download a remote page by using an HTTP POST request.

7 load (url, [data], [callback])

Download HTML from a remote file and inject it into the DOM.

8 serialize ()

Ordering a set of input elements into a data string

9 serializeArray ()

Sort all forms and form elements as the .serialize () method, but return a JSON data structure for you to work with.

JQuery AJAX events

You can call various jQuery methods throughout the life of the AJAX call process. Based on the different Event / Stage, the following methods are available:

You visit the following page to see all AJAX Events in jQuery

Formula & Description1 ajaxComplete (callback)

Attach a function to be executed whenever an AJAX Request is completed

2 ajaxStart (callback)

Attach a function to be executed whenever an AJAX Request starts and no action is available

3 ajaxError (callback)

Attach a function to be executed whenever an AJAX Request fails

4 ajaxSend (callback)

Attach a function to be executed before an AJAX Request is sent

5 ajaxStop (callback)

Attach a function to be executed whenever all AJAX Requests have ended

6 ajaxSuccess (callback)

Attach a function to be executed whenever an AJAX Request ends successfully

Follow tutorialspoint

Previous article: Event handling in jQuery

Next lesson: Effects in jQuery

Micah Soto

Update 25 May 2019