0

0

jquery对ajax的支持介绍_jquery

php中文网

php中文网

发布时间:2016-05-16 17:09:47

|

1114人浏览过

|

来源于php中文网

原创

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

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
go语言 注释编码
go语言 注释编码

本专题整合了go语言注释、注释规范等等内容,阅读专题下面的文章了解更多详细内容。

2

2026.01.31

go语言 math包
go语言 math包

本专题整合了go语言math包相关内容,阅读专题下面的文章了解更多详细内容。

1

2026.01.31

go语言输入函数
go语言输入函数

本专题整合了go语言输入相关教程内容,阅读专题下面的文章了解更多详细内容。

1

2026.01.31

golang 循环遍历
golang 循环遍历

本专题整合了golang循环遍历相关教程,阅读专题下面的文章了解更多详细内容。

0

2026.01.31

Golang人工智能合集
Golang人工智能合集

本专题整合了Golang人工智能相关内容,阅读专题下面的文章了解更多详细内容。

1

2026.01.31

2026赚钱平台入口大全
2026赚钱平台入口大全

2026年最新赚钱平台入口汇总,涵盖任务众包、内容创作、电商运营、技能变现等多类正规渠道,助你轻松开启副业增收之路。阅读专题下面的文章了解更多详细内容。

76

2026.01.31

高干文在线阅读网站大全
高干文在线阅读网站大全

汇集热门1v1高干文免费阅读资源,涵盖都市言情、京味大院、军旅高干等经典题材,情节紧凑、人物鲜明。阅读专题下面的文章了解更多详细内容。

73

2026.01.31

无需付费的漫画app大全
无需付费的漫画app大全

想找真正免费又无套路的漫画App?本合集精选多款永久免费、资源丰富、无广告干扰的优质漫画应用,涵盖国漫、日漫、韩漫及经典老番,满足各类阅读需求。阅读专题下面的文章了解更多详细内容。

67

2026.01.31

漫画免费在线观看地址大全
漫画免费在线观看地址大全

想找免费又资源丰富的漫画网站?本合集精选2025-2026年热门平台,涵盖国漫、日漫、韩漫等多类型作品,支持高清流畅阅读与离线缓存。阅读专题下面的文章了解更多详细内容。

19

2026.01.31

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
jQuery 教程
jQuery 教程

共42课时 | 5.2万人学习

HTML+CSS基础与实战
HTML+CSS基础与实战

共132课时 | 10万人学习

tp6+adminlte搭建通用后台
tp6+adminlte搭建通用后台

共39课时 | 5.8万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号