jquery对ajax的支持介绍

前端技术 2023/09/06 JavaScript

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(),

本文地址:https://www.stayed.cn/item/16756

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见,何事秋风悲画扇。