AJAX-related APIs in JQuery

Note the $.load () function is deprecated in version 1.8.

Asynchronously loading JSON-formatted data using the Getjson () method

Using the Getjson () method, you can get the data in the server by means of an AJAX asynchronous request, and parse the obtained data, which is displayed in the page with the following format:

Jquery.getjson (Url,[data],[callback]) or $.getjson (Url,[data],[callback])

Where the URL parameter is the server address for the request to load the JSON-formatted file, the option data parameter is the one that is sent when the request is requested, and the callback parameter is the callback function that executes after the data request succeeds.

For example, click the Load button in the page, call the Getjson () method to get data from a JSON-formatted file in the server, and iterate through the data to display the specified field name content in the page. As shown in the following:

Effects displayed in the browser:

As you can see, when the "Load" button is clicked, the Sport.json file in the server is called through the Getjson () method, the data of the returned data file is retrieved, and the object is traversed to data["name" to remove the specified contents from the data and is displayed in the page.

Asynchronously loading and executing a JS file using the Getscript () method

Use the Getscript () method to asynchronously request and execute a JavaScript-formatted file in the server with the following invocation format:

Jquery.getscript (Url,[callback]) or $.getscript (Url,[callback])

The parameter URL is the server request address, and the optional callback parameter is the callback function that executes after the request succeeds.

For example, click the "Load" button, call Getscript () to load and execute a JavaScript-formatted file with the name specified in the server, and display the loaded data content in the page, as shown in:

Effects displayed in the browser:

As you can see, when you click the "Load" button to call the Getscript () method to load the JavaScript format file in the server, the file code is automatically executed, displaying the data content in the

Element.
Get data from the server using the Get () method

When using the Get () method, a Get method is used to request data to the server, and the requested data is returned through the parameters of the callback function in the method, and its invocation format is as follows:

$.get (Url,[callback])

The parameter URL is the server request address, and the optional callback parameter is the callback function that executes after the request succeeds.

For example, when you click the Load button, the Get () method is called to request data from a. php file in the server, and the returned data content is displayed in the page, as shown in:

Effects displayed in the browser:


As you can see, after successfully requesting data from the server through the $.get () method, the data parameter is passed back in the callback function, and the contents of the items in the data are accessed in data.name format.

Use the post () method to send data from the server in post

Compared to the Get () method, the post () method is used to send data to the server in post, the server receives the data, processes it, and returns the processing result to the page, called the following format:

$.post (Url,[data],[callback])

The parameter URL is the server request address, optionally the data to be sent to the server when requested, the optional callback parameter is the callback function executed after the request succeeds.

For example, enter a number in the input box, click the "Detect" button, call the Post () method to send the request to the server post, detect the parity of the input value, and appear in the page, as shown in:


Effects displayed in the browser:

As you can see, when the "Detect" button is clicked, the value in the input box is obtained, and the value is sent to the server using the $.post () method, the server receives the value and processes it, and finally returns the processing result.

Use the Serialize () method to serialize the value of the form element

Use the Serialize () method to serialize element values in the form that have the name attribute, to generate a standard URL-encoded text string that can be used directly in the AJAX request, with the following invocation format:

$ (selector). Serialize ()

Where the selector parameter is the element in one or more forms or the form element itself.

For example, when you add multiple elements to a form, and then click the Serialize button, call the Serialize () method to display the standard URL-encoded text string after the form element is serialized in the page, as shown in:


Effects displayed in the browser:


As you can see, when the "serialization" button is clicked, the Serialize () method of the form element itself is called, all elements in the form are serialized, the standard URL encoding is generated, and the elements are linked by the & number.

Using the Ajax () method to load server data

Using the Ajax () method is the lowest, most powerful way to request server data, not only to get the data returned by the server, but also to send a request to the server and pass a numeric value, which is called in the following format:

Jquery.ajax ([Settings]) or $.ajax ([settings])

Where the parameter settings is the configuration object when the AJAX request is sent, in which the URL represents the path requested by the server, data is passed at the request, datatype is the data type returned by the server, success is the callback function for the successful execution of the request, Type is the way to send data requests by default to get.

For example, click the Load button in the page, call the Ajax () method to request a TXT file to the server, and display the contents of the returned file in the page, as shown in:

Effects displayed in the browser:

As you can see, when you click the "Load" button, call the $.ajax () method to request the TXT file on the server, call the success callback function when the request succeeds, get the returned data, and display it in the page.

Set global AJAX default options using the Ajaxsetup () method

Use the Ajaxsetup () method to set some of the global option values for the AJAX request, and after the setup is complete, the subsequent AJAX requests will not need to add these option values, which are called in the following format:

Jquery.ajaxsetup ([options]) or $.ajaxsetup ([options])
The optional options parameter is an object that sets the global option value for an AJAX request.

For example, first call the Ajaxsetup () method to set the global Ajax option value, then click two buttons, respectively, using the Ajax () method to request different server data, and display the data content on the page, as shown in:

Effects displayed in the browser:

As you can see, when you use the Ajaxsetup () method to set some of the global configuration options for AJAX requests, you only need to set the URL address when you call the AJAX Request Server TXT file two times.

The above picture has some missing parameters, the following is the general format:

$.ajaxSetup({            url: 'data/check.php',            data: { num: $("#txtNumber").val() },            type: "POST",            dataType: 'text',            success: function(data) {                        }        });

Using the Ajaxstart () and Ajaxstop () methods

The Ajaxstart () and Ajaxstop () methods are bound Ajax events. The Ajaxstart () method is used to trigger a function before the AJAX request is issued, and the Ajaxstop () method is used to trigger the function after the AJAX request is completed. They are called in the following format:

$ (selector). Ajaxstart (function ()) and $ (selector). Ajaxstop (function ())

Where two of the parentheses in the method are bound functions, the function that executes the ajaxstop () method binds the Ajaxstart () method when the request is executed before the AJAX request is sent.

For example, before calling the Ajax () method to request server data, an animated display is being loaded, and when the request succeeds, the animation is automatically hidden, as shown in:

Effects displayed in the browser:


As you can see, because animation elements are bound with the Ajaxstart () and Ajaxstop () methods, when you start sending an AJAX request, the element is displayed and the animation element is automatically hidden when the request completes.

Note: This method is normal for use under 1.8.2
jquery 1.9+ to use $ (document). Ajaxstart (function () {$ ("#divload"). html ();}) will only take effect.

AJAX-related APIs in JQuery