1. Three methods
1.1.load method
Function: Add the data returned by the server directly to the DOM object that meets the requirements
Equivalent to obj.innerhtml = data returned by the server
Usage:
$obj. Load (url,[request parameters]);
URL: Request Address
Request Parameters:
The first form: request strings, such as: ' Username=zs&age=22 '
The second form: objects, such as {' username ': ' Zs ', ' age ': 22}
Attention:
A, if the load method has no parameters, the request is sent using the Get method. If there are parameters, the request is sent using the Post method.
b, if there is a Chinese parameter value, the Load method has already done the coding for us.
Example:
Copy Code code as follows:
$ (function () {
$ (' a.s1 '). Toggle (function () {
var airline = $ (this). Parent (). siblings (). EQ (0). text ();
$ (this). Next (). Load (' priceinfo.do ', ' airline= ' + airline);
$ (this). HTML (' Show Economy class price ');
},function () {
$ (this). Next (). empty ();
$ (this). HTML (' Show all Fares ');
});
});
1.2.$.get () and $.post () methods
Function: Send a GET or POST request to the server (got request IE has a cache problem)
Usage:
$.get (Url,[data],[callback],[type]);
$.post (Url,[data],[callback],[type]);
URL: Request Address
Data: Request parameter, Form ditto.
Callback: A callback function that you can use to handle the data returned by the server.
Callback Format:
function (Data,statustext),
Where data can be obtained from the server,
StatusText is a simple string that describes the state of the server processing.
Type: The data types returned by the server can be:
HTML: Returns the HTML content.
Text: Returns the text.
JSON: Returns a JSON string
XML: Returns a DOM-compliant XML object
Script: Returned JAVASCRIPTZ
Example:
Copy Code code as follows:
function Quoto () {
$.post (' quoto.do ', function (data) {
If the data returned by the server is a JSON string,
is automatically converted to an array of JS objects or JSON objects.
$ (' #tb1 '). empty ();
for (i=0;i<data.length;i++) {
$ (' #tb1 '). Append (
' <tr><td> ' + data[i].code
+ ' </td><td> ' + data[i].name
+ ' </td><td> ' + data[i].price
+ ' </td></tr> ');
}
}, ' json '); t
}
1.3.$.ajax (Options):
Options are a form like {key1:value1,key2:value2 ...} The JS object that specifies the option to send the request.
The option parameters are as follows:
URL (String)://Request Address
Type (string)://get/post
Data (object/string)://Sent to the server
DataType (String)://Expected data type returned by server
Success (function)://callback function called after the success of the request, with two parameters:
function (Data,textstatus),
Where data is returned by the server,
Textstatus A string describing the state.
Error (function)://functions called when a request fails with three parameters
function (Xhr,textstatus,errorthrown),
Where XHR is the underlying Ajax object (XMLHttpRequest),
Textstatus,errorthrown These two parameters, the
One can get the underlying exception description.
Async:true (default)/false://When the value is false, the synchronization request is sent.
Example:
Copy Code code as follows:
$ (function () {
$ (' #s1 '). Change (function () {
$.ajax ({
' URL ': ' Carinfo.do ',
' type ': ' Post ',
' Data ': ' Carname= ' +$ (' #s1 '). Val (),
' DataType ': ' xml ',
' Success ': function (data) {
Data is returned by the server
If the XML document is returned, we need to use the
The $ function wraps it up $ (data) into a jquery
Object for easy lookup.
Empty before appending
$ (' #tb1 '). empty ();
$ (' #tb1 '). Append (
' <tr><td> Manufacturer: '
+ $ (data). Find (' company '). Text ()
+ ' Prices: ' + $ (data). Find (' price '). Text ()
+ ' </td><td> body size: '
+ $ (data). Find (' size '). Text ()
+ ' Gate number: ' + $ (data). Find (' door '). Text ()
+ ' </td><td> Displacement: '
+ $ (data). Find (' vol '). Text ()
+ ' accelerated performance: '
+ $ (data). Find (' speed '). Text ()
+ ' </td></tr> ');
To display the table
$ (' #tips '). Slidedown (' slow ');
settimeout (function () {
$ (' #tips '). fadeout (' slow ');
},2000);
},
' Error ': function () {
$ (' #tb1 '). Append (
"<tr><td colspan= ' 3 ' > The information for the vehicle is temporarily unavailable </td></tr>");
$ (' #tips '). Slidedown (' slow ');
}
});
});
});
Example 2:
Solve the Chinese garbled problem:
Copy Code code as follows:
$.ajax ({
' URL ': ' Netctoss7/ajaxcode ',
' type ': ' Post ',
' Data ': {Name:value},
' DataType ': ' JSON ',
' Async ': false,
' Success ': function (data) {
if (data) {
$ (' #msg_verCode '). Text (');
V1=true;
}else{
$ (' #msg_verCode '). Text (' Authentication code error ');
}
}
});
2. Two auxiliary methods
2.1.serialize ():
Converts a form or form control contained in a jquery object into a query string.
2.2.serializeArray ():
Converts to an array, with each array element shaped like an object of {Name:fieldname,value:fieldval}.
The role of the serialized element is mainly used in AJAX requests, to assign values to data.
Description
Only for forms or form controls
Send the name of the form and the corresponding value value directly, in the form of: Name=value
Example:
Copy Code code as follows:
In $.ajax ({})
' Data ': ' Carname= ' +$ (' #s1 '). Val (),
' Data ': $ (' #s1 '). Serialize (),
' Data ': {' carname ': $ (' #s1 '). Val ()},
' Data ': $ (' #s1 '). Serializearray (),
