Introduction to jquery support for ajax

1. Three ways

1.1. The load method

// effect: directly add the data returned by the server to the dom object that meets the requirements
// is equivalent to obj.innerHTML = the data returned by the server

Usage:
$obj.load(url,[request parameter]);

Url: request address
Request parameters:
The first form: a request string, such as 'username=zs&age=22'
Second form: object such as {'username':'zs','age':22}

/ / note:
//a, the load method, if there are no parameters, will use get to send the request. If there are arguments, the request is sent using post.
//b, if there is a Chinese parameter value, the load method has done the coding for us.

Example:

 
$(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 (get request ie has cache problems)

Usage:
$.get (url, [data], [callback], [type]);
$.post (url, [data], [callback], [type]);

Url: request address
Data: request parameter, in the same form as above.
Callback: a callback function that handles the data returned by the server.
The callback format:

Function (data, statusText),

Where, data can get the data returned by the server,
StatusText is a simple string that describes the state of server processing.

Type: the data type returned by the server, which can be:
HTML: returns HTML content.
Text: returns text.
Json: returns a json string
XML: returns a dom-compatible XML object
Script: returns the javascriptz

Example:

 
function quoto(){ 
$.post('quoto.do',function(data){ 
//If the data returned from the server is a json string,
//Automatically converts 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 such as {key1: value1, key2: value2... } js object that specifies the option to send the request.

Option parameters are as follows:

Url (string) : // request address
Type (string) : / / GET/POST
Data (object/string) : // data sent to the server
DataType (string) : // the dataType expected to be returned by the server
Success (function) : // callback function called after a successful request, with two arguments:
Function (data, textStatus),
Where, data is the data returned by the server,
TextStatus describes the string of states.
Error (function) : // function called when a request fails, with three arguments
The function (XHR, textStatus errorThrown),
Where XHR is the underlying ajax object (XMLHttpRequest),
TextStatus,errorThrown
One can get the underlying exception description.
Async :true(default)/false: // when the value is false, send the synchronization request.

Example:

 
$(function(){ 
$('#s1').change(function(){ 

$.ajax({ 
'url':'carInfo.do', 
'type':'post', 
'data':'carName='+$('#s1').val(), 
'dataType':'xml', 
'success':function(data){ 
//Data is the data returned by the server
//If the return is an XML document, we need to use it
//The $function wraps it in $(data) as a jQuery
//Object, easy to find.
//Empty before you append
$('#tb1').empty(); 
$('#tb1').append( 
'<tr><td> manufacturers :' 
+ $(data).find('company').text() 
+'  The price :' + $(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() 
+ '  acceleration :' 
+ $(data).find('speed').text() 
+ '</td></tr>'); 
//You want to display the table
$('#tips').slideDown('slow'); 
setTimeout(function(){ 
$('#tips').fadeOut('slow'); 
},2000); 
}, 
'error':function(){ 
$('#tb1').append( 
"<tr><td colspan='3'> This model information is temporarily unavailable </td></tr>"); 
$('#tips').slideDown('slow'); 
} 
}); 
}); 
}); 

Example 2:
Solve the problem of Chinese garbled code:

 
$.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(' Verification code error '); 
} 
} 
}); 

2. Two complementary approaches

2.1 serialize () :

// converts a form or form control contained in a jquery object into a query string.

2.2. SerializeArray () :

/ / is converted to an array, each array element shape such as {name: fieldName, value: fieldVal} of the object.
The // serialization element is primarily used to assign data to ajax requests.

Description:
Only for forms or form controls
Directly send the name and the corresponding value of the form, such as :name=value

Example:

 
$.ajax({}) In the  
//'data':'carName='+$('#s1').val(), 
'data':$('#s1').serialize(), 

//'data':{'carName':$('#s1').val()}, 
'data':$('#s1').serializeArray(),