视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
jquery对ajax的支持介绍_jquery
2020-11-27 21:17:06 责编:小采
文档

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$('#tb1').append(
'' + data[i].code
+ '' + data[i].name
+ '' + data[i].price
+ '');
}
},'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(
'制造商:'
+ $(data).find('company').text()
+' 价格:' + $(data).find('price').text()
+' 车身大小:'
+ $(data).find('size').text()
+ ' 门数:' + $(data).find('door').text()
+ '排量: '
+ $(data).find('vol').text()
+ ' 加速性能:'
+ $(data).find('speed').text()
+ '');
//要将表格显示出来
$('#tips').slideDown('slow');
setTimeout(function(){
$('#tips').fadeOut('slow');
},2000);
},
'error':function(){
$('#tb1').append(
"该车型信息暂时不可用");
$('#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(),

下载本文
显示全文
专题