Introduction to jquery's support for ajax_jquery

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 string, such as: 'username=zs&age=22'
The second form: object, such as {'username':'zs','age':22}

//Note:
//a, if the load method has no parameters, it will use the get method to send the request. If there are parameters, the post method will be used to send the request.
//b, if there are Chinese parameter values, the load method has already done the encoding for us.

Example:

Copy code The code is as follows:

$(function( ){
$('a.s1').toggle(function(){
var airline = $(this).parent().siblings().eq(0).text();
$(this).next().load('priceInfo.do','airline=' airline);
$(this).html('Display economy class price');
},function( ){
$(this).next().empty();
$(this).html('Show all fares');
});
});

1.2.$.get() and $.post() methods

//Function: Send get or post request to the server (get request ie has caching problem)

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

url: request address
data: request parameters, the form is the same as above.
callback: callback function, which can be used to process the data returned by the server.
Callback format:

function(data, statusText),

Among them, data can get the data returned by the server,
statusText is a simple string describing the processing by the server state.

type: The data type returned by the server. The type can be:
html: Returns html content.
text: Returns text.
json: returns a json string
xml: returns a DOM-compatible xml object
script: returns javascriptz

Example:

Copy code The code is as follows:

function quoto(){
$.post('quoto.do',function(data) {
//If the data returned by the server is a json string,
//will be automatically converted into a js object or an array of json objects.
$('#tb1').empty();
for(i=0;i$('#tb1').append(
' ' data[i].code
' ' data[i].name
' ' data[i].price
'');
}
},'json');t
}

1.3.$.ajax(options):

/ /options is a js object in the shape of {key1:value1,key2:value2...}, used to specify options for sending requests.

option parameters are as follows:

url(string) : //Request address
type(string) : //GET/POST
data(object/string) : // Data sent to the server
dataType(string): //The data type expected to be returned by the server
success(function): //The callback function called after the request is successful, has two parameters:
function(data , textStatus),
where data is the data returned by the server,
textStatus is a string describing the status.
error(function): //Function called when the request fails, with three parameters
function(xhr, textStatus, errorThrown),
where xhr is the underlying ajax object (XMLHttpRequest),
textStatus , one of the two parameters errorThrown
can obtain the underlying exception description.
async:true (default)/false: //When the value is false, send a synchronous request.

Example:

Copy code The code is as follows:

$(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 an xml document is returned, we need to use
//$function to wrap it $(data) into a jQuery
//object for easy search
//clear before appending
$('#tb1').empty();
$('#tb1').append(
' Manufacturer:'
$(data).find('company').text()
' Price:' $(data).find('price ').text()
' Body size:'
$(data).find('size').text()
'Number of doors:' $ (data).find('door').text()
' Displacement: '
$(data).find('vol').text()
'Acceleration performance:'
$(data).find('speed').text()
' ');
//To convert the table Display
$('#tips').slideDown('slow');
setTimeout(function(){
$('#tips').fadeOut('slow');
},2000);
},
'error':function(){
$('#tb1').append(
"The vehicle model information is temporarily unavailable");
$('#tips').slideDown('slow');
}
});
});
});

Example 2:
Solving the problem of Chinese garbled characters:

Copy code The code is 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('Verification code error') ;
}
}
});

2. Two auxiliary methods

2.1.serialize():

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

2.2.serializeArray():

//Convert to an array, each array element is an object in the shape of {name:fieldName,value:fieldVal}.
//The role of serialized elements is mainly used in ajax requests to assign values ​​to data.

Note:
can only be used for forms or form controls
Send the name of the form and the corresponding value directly, in the form: name=value

Example:

Copy code The code is as follows:

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

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