A summary of Ajax-related methods in jquery

Pre-conditions

It is the AJAX approach in jquery, so the prerequisites are, of course, the introduction of jquery.

<script src= "Http://libs.baidu.com/jquery/1.9.0/jquery.js" type= "Text/javascript" ></script>

Specific methods

①load ()

The load() method uses the AJAX request to load the data from the server and puts the returned data into the specified element, which is called in the following format:

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

The parameter URL is the load server address, and optionally the data parameter is the callback function that is sent when the data request is requested, and the callback parameter is the execution of the database.

For example, when the Load button is clicked, the content of a specified page is requested to be loaded by the server, the data content is displayed in the <div> element after the load succeeds, and the Load button becomes unavailable. As shown in the following:

② loading JSON-formatted data asynchronously using the Getjson () method

The use getJSON() method can get the array in the server through the way of Ajax asynchronous request, and parse the obtained data, which is displayed in the page, it is called in 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 to invoke the getJSON() method to get data from a JSON-formatted file on the server and iterate through the data to display the specified field name content in the page. As shown in the following:

③ asynchronously loads and executes the JS file using the Getscript () method

Use the getScript() method to asynchronously request and execute a file in JavaScript format on the server, whose invocation format is as follows:

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 to invoke a getScript() JavaScript-formatted file that loads and executes the specified name in the server and display the loaded data content in the page, as shown in:

Effects displayed in the browser:

④ using the Get () method to get data from the server in Get mode

When using a 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 calls a. php file in the server to request data in a Get mode and displays the returned data content in the page, as shown in:

⑤ using the Post () method to send data from the server in post

Compared with 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 server post request, detect the parity of the input value, and display in the page, as shown in:

⑥ serialization of form element values using the Serialize () method

Use the serialize() method to serialize the element value in the form that has the name attribute, generating a standard URL-encoded text string that can be used directly for the AJAX request, which has 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, the method is called, and the serialize() standard URL encoded text string after the form element is serialized appears in the page, as shown in:

Display effect in Browser:

⑦ using the Ajax () method to load server data

The use of the ajax() method is the lowest, most powerful method of requesting server data, it can not only get the data returned by the server, but also send a request to the server and pass a numeric value, its invocation format is as follows:

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, clicking the "Load" button in the page calls the ajax() method to request the server to load a TXT file and displays the contents of the returned file in the page, as shown in:

⑧ setting global AJAX default options using the Ajaxsetup () method

Use ajaxSetup() the 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:

⑨ using the Ajaxstart () and Ajaxstop () methods

ajaxStart()And ajaxStop() the method is to bind 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 method binding before the Ajax request is sent, the ajaxStart() ajaxstop () method is executed after the request succeeds.

For example, before calling a 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:

Results in the browser:

?

As you can see, because the ajaxStart() ajaxStop() animation element is bound by the usage and method, the element displays when the AJAX request is started, and the animation element is automatically hidden when the request is complete.

Welcome to my personal subscription number: Life on the front

A summary of Ajax-related methods in jquery