Data transfer in jquery

Source: Internet
Author: User

Having finished with the difference between get and post, we will now begin to use jquery (the Web) for both protocols and other methods of obtaining data.
A mention of the transfer of data, Ajax everyone will be familiar with, today is mainly the jquery to Ajax encapsulation of several common methods, where $.ajax () is the most basic method, $.load (), $.get (), $.post () is the second layer of the method, and $. Getscript () and $.getjson () are the third-tier methods.

Previously used $.ajax () to solve all the data interaction, found that this is inefficient and the code is large, the appropriate use of these upper-level method is also good.

A. $ (Element). Load ()
The general loading is static files;
Think very simple, the first foot on the pit, load () can not load local files, some people say that the security mechanism of Windows caused, on the other hand should be packaged with the server to respond to it.
Moreover, the load should be only data, not like the entire structure of the IFRAME.
1. Loading HTML documents

$ (Element). Load (Url[,data][,callback])

Note: Both data and callback functions are optional
URL: Needless to say, the requested address
Data: Sent to the server Key/value
Callback: The callback function after the request completes, whether the request succeeds or fails
Example: $ ("#content"). Load ("demo.html", {"id": "1", "Name": "CC"},function () {
})
2. Filter part of a loaded HTML document
$ (Element). Load ("URL selector")
$ ("#content"). Load ("demo.html. Content", {"id": "1", "Name": "CC"},function () {
})
3. Transfer Mode
When data is null and is default to get mode, and is not NULL, the default is post
4. Callback Parameters
$ ("#content"). Load ("demo.html. Content", {"id": "1", "Name": "CC"},function (responsetext,teststatus,xmlhttprequest) {
Responsettext: What to return
Textstatus: Request Status: Success/error/notmodified/timeout
Xmlhttprequest:xmlhttprequest objects
})
Two. $.get ()

$.get (Url[,data][,callback][,type])

URL: Needless to say, the requested address
Data: Sent to the server Key/value
Callback: Callback function when loading succeeds, pay attention to the difference with load. Only request results and status two parameters
Type: server-side return content format: Xml/html/script/json/text/_default

The main need to note is to parse the various formats of data methods, here is not detailed.
Three. $.post ()
With $.get () is similar to the use, it is the difference between the two modes of transmission on the blog has been introduced.

The above three methods are OK to complete the conventional AJAX program, but some complex AJAX programs need to use the $.ajax () method. It can not only achieve the above three functions, but also set a number of callback functions to handle different situations.
Iv. $.ajax ()
$.ajax (Options)
It has only one parameter, which encapsulates all the parameters and the swap function into an object, all of which are in a key/value form, and all parameters are optional.
Ajax () provides a large amount of parameters, so you can achieve fairly complex functionality.

Description of Parameter name type
URL String (Default: Current page address) sends the requested address.
Type String (default: "Get") Request method ("POST" or "get"), default to "get".
Note: Other HTTP request methods, such as put and DELETE, are also available, but only partially supported by browsers.
Timeout number sets the request timeout (in milliseconds). This setting overrides the global setting.
Async Boolean (Default: TRUE) is the default setting, all requests are asynchronous requests.
If you need to send a sync request, set this option to false.
Note that the synchronization request will lock the browser and the user's other actions must wait for the request to complete before it can be executed.
Beforesend function to modify XMLHttpRequest objects before sending a request, such as adding custom HTTP headers.
The XMLHttpRequest object is the only parameter.
function (XMLHttpRequest) {this;//the options for this Ajax request} function (XMLHttpRequest) {this;//the options For this AJAX request}

Cache Boolean (Default: TRUE) JQuery 1.2 new functionality, set to false will not load request information from the browser cache.
The callback function (called when the request succeeds or fails) after the complete function request completes.
Parameters: XMLHttpRequest Object, Success message string.
function (XMLHttpRequest, textstatus) {this;//the options for this Ajax request} function (XMLHttpRequest, textstatus) {This;//the options for this AJAX request}
ContentType String (default: "application/x-www-form-urlencoded") the content encoding type when sending information to the server. Default values are appropriate for most applications.
Data Object,
String sent to the server's data. is automatically converted to the request string format. The GET request is appended to the URL.
View the ProcessData option description to prevent this automatic conversion. Must be in the Key/value format.
If you are an array, JQuery will automatically correspond to the same name for different values.
such as {foo:["bar1", "Bar2"]} is converted to ' &foo=bar1&foo=bar2′.
DataType String expects the data type returned by the server. If not specified, JQuery will automatically follow the HTTP package MIME information
Returns the Responsexml or ResponseText and passes as a callback function parameter, available values:
"XML": Returns an XML document that can be processed with jQuery.
HTML: Returns plain text HTML information, including script elements.
Script: Returns the plain text JavaScript code. Results are not automatically cached.
"JSON": Returns JSON data.
"JSONP": Jsonp format. When calling a function using the JSONP form,
Like "myurl?callback=?" JQuery will automatically replace? To the correct function name to execute the callback function.
This method is called when the error Function (default: Automatic judgment (XML or HTML)) fails.
This method has three parameters: the XMLHttpRequest object, the error message, and (possibly) the error object being caught.
function (XMLHttpRequest, textstatus, Errorthrown) {//typically Textstatus and Errorthown only one of them has a value of this;//the options for this a Jax Request} function (XMLHttpRequest, textstatus, Errorthrown) {//typically Textstatus and Errorthown only one of them has a value of this;//the Opti ONS for this AJAX request}
Whether global Boolean (default: TRUE) triggers a globally AJAX event. Set to false will not trigger global AJAX events.
such as Ajaxstart or Ajaxstop. Can be used to control different AJAX events
Ifmodified Boolean (default: false) gets new data only when server data changes.
Use HTTP packet last-modified header information to determine.
ProcessData Boolean (default: TRUE) by default, the data sent is converted to an object (technically not a string)
To match the default content type "application/x-www-form-urlencoded".
Set to False if you want to send DOM tree information or other information that you do not want to convert.
Success Function
callback function after successful request. This method has two parameters: the server returns the data, returns the status
function (data, textstatus) {//data could be xmldoc, jsonobj, HTML, text, etc ... this;//the options for this Ajax reques T} function (data, textstatus) {//data could be xmldoc, jsonobj, HTML, text, etc ... this;//the options for this Ajax re Quest}

V. $.getscript ()
As the name suggests, dynamically loading a script file can also add a callback function to handle other operations.
VI. $.getjson ()
Dynamically loading JSON files

Attached: JSONP operation can find my previous blog to see, it should be said very clearly.

VII. serialization elements
1.serialize () method
To serialize the contents of DOM elements into strings and data for transmission, it is important to note that when you transmit, you do not need a key-value pair form, and you can write a serialized one directly.
In addition, not only form can be serialized, but also the elements selected by other selectors can be used.
2.serializeArray () method
Instead of converting it to string, it translates directly into a JSON object
3.$.prarm ()
It is actually the core of the Serialize () method, which serializes an array or object.
Cases:

var obj = {A:1,b:2,c:3}
var k = $.param (obj);
Alert (k)/Output a=1&b=2&c=3

Eight, other
jquery also defines some other interesting global callback functions based on Ajax. Yes:
Ajaxstart (callback), Ajaxstop (callback), Ajaxcomplete (callback), Ajaxerror (callback), Ajaxsend (callback), Ajaxsuccess (callback).

Because these functions are global functions, they are effective whenever the page is AJAX-operated

As an example:

<div class= "Loading" ></div>

$ (". Loading"). Ajaxstart (function () {
    $ (this). Show ();
});
$ (". Loading"). Ajaxstop (function () {
    $ (this). Hide ();
});

I've never used these methods before, write a lot of useless code, and then have the opportunity to use it.

Wrote a lot of, in the middle to have the wrong place to remind you, who can not. Hehe

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.