手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >jquery对ajax的支持介绍
jquery对ajax的支持介绍
摘要:1.三个方法1.1.load方法//作用:将服务器返回的数据直接添加到符合要求的dom对象上//相当于obj.innerHTML=服务器返回...

1.三个方法

1.1.load方法

//作用:将服务器返回的数据直接添加到符合要求的dom对象上

//相当于 obj.innerHTML = 服务器返回的数据

用法:

$obj.load(url,[请求参数]);

url : 请求地址

请求参数 :

第一种形式:请求字符串,比如: 'username=zs&age=22'

第二种形式:对象,比如 {'username':'zs','age':22}

//注意:

//a, load方法如果没有参数,会使用get方式发请求。如果有参数,会使用post方式发请求。

//b, 如果有中文参数值,load方法已经帮我们做了编码处理。

例子:

复制代码 代码如下:

$(function(){

$('a.s1').toggle(function(){

var airline = $(this).parent().siblings().eq(0).text();

$(this).next().load('priceInfo.do','airline=' + airline);

$(this).html('显示经济舱价格');

},function(){

$(this).next().empty();

$(this).html('显示所有票价');

});

});

1.2.$.get()和$.post()方法

//作用:向服务器发送get或者post请求 (get请求ie有缓存问题)

用法:

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

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

url : 请求地址

data : 请求参数,形式同上。

callback : 回调函数,可以通过该函数来处理服务器返回的数据。

callback格式:

function(data,statusText),

其中,data可以获得服务器返回的数据,

statusText是一个简单的字符串,描述服务器处理的状态。

type : 服务器返回的数据类型,类型可以是:

html : 返回的是html内容。

text : 返回的是text。

json : 返回的是json字符串

xml : 返回的是dom兼容的xml对象

script: 返回的javascriptz

例子:

复制代码 代码如下:

function quoto(){

$.post('quoto.do',function(data){

//如果服务器返回的数据是json字符串,

//会自动转换成js对象或者json对象组成的数组。

$('#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是一个形如{key1:value1,key2:value2...}的js对象,用于指定发送请求的选项。

选项参数如下:

url(string) : //请求地址

type(string) : //GET/POST

data(object/string) : //发送到服务器的数据

dataType(string) : //预期服务器返回的数据类型

success(function) : //请求成功后调用的回调函数,有两个参数:

function(data,textStatus),

其中,data是服务器返回的数据,

textStatus 描述状态的字符串。

error(function) : //请求失败时调用的函数,有三个参数

function(xhr,textStatus,errorThrown),

其中xhr是底层的ajax对象(XMLHttpRequest),

textStatus,errorThrown这两个参数其中的

一个可以获得底层的异常描述。

async:true(缺省)/false : //当值为false时,发送同步请求。

例子:

复制代码 代码如下:

$(function(){

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

$.ajax({

'url':'carInfo.do',

'type':'post',

'data':'carName='+$('#s1').val(),

'dataType':'xml',

'success':function(data){

//data是服务器返回的数据

//如果返回的是xml文档,我们需要使用

//$函数将其包装$(data)成一个jQuery

//对象,方便查找。

//追加之前先清空

$('#tb1').empty();

$('#tb1').append(

'<tr><td>制造商:'

+ $(data).find('company').text()

+' 价格:' + $(data).find('price').text()

+' </td><td>车身大小:'

+ $(data).find('size').text()

+ ' 门数:' + $(data).find('door').text()

+ '</td><td>排量: '

+ $(data).find('vol').text()

+ ' 加速性能:'

+ $(data).find('speed').text()

+ '</td></tr>');

//要将表格显示出来

$('#tips').slideDown('slow');

setTimeout(function(){

$('#tips').fadeOut('slow');

},2000);

},

'error':function(){

$('#tb1').append(

"<tr><td colspan='3'>该车型信息暂时不可用</td></tr>");

$('#tips').slideDown('slow');

}

});

});

});

例子2:

解决中文乱码问题:

复制代码 代码如下:

$.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('验证码错误');

}

}

});

2.两个辅助性的方法

2.1.serialize():

//将jquery对象包含的表单或者表单控件转换成查询字符串。

2.2.serializeArray():

//转换为一个数组,每个数组元素形如{name:fieldName,value:fieldVal}的对象。

//序列化元素的作用,主要是用于ajax请求中,给data赋值。

说明:

只能用于表单或者表单控件

直接把表单的name和对应的value值发送出去,形如:name=value

例子:

复制代码 代码如下:

$.ajax({})中

//'data':'carName='+$('#s1').val(),

'data':$('#s1').serialize(),

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

'data':$('#s1').serializeArray(),

【jquery对ajax的支持介绍】相关文章:

jQuery实现返回顶部效果的方法

jQuery处理图片加载失败的常用方法

Jquery解析json字符串及json数组的方法

jquery预加载图片的方法

jquery判断至少有一个checkbox被选中的方法

jquery实现图片左右切换的方法

JQuery自动触发事件的方法

jQuery实现dialog设置focus焦点的方法

document对象execCommand的command参数介绍

jquery实现动态改变div宽度和高度

精品推荐
分类导航