jquery ajax请求实例深入解析


Posted in Javascript onNovember 26, 2012

jquery中封装了一些ajax请求的方法,很实用。
比如.ajaxComplete()——请求完成时.ajaxError()——请求失败时.ajaxSend()——在Ajax请求发送时附加一个function去执行.ajaxStart()——请求开始时,.ajaxStop()——请求结束时.ajaxSuccess()——请求成功时.load()——从服务端加载数据并将返回的HTML替换到选择的元素中jQuery.post()——使用HTTP POST请求加载服务端数据.serialize()——将form元素集编码成一个字符串以便提交.serializeArray()——将form元素集编码成一个键值对数组jQuery.param()——创建一个序列化的数组或对象,使得适用于一个URL查询字符串或者Ajax请求jQuery.getScript()——从服务端加载一个js文件,然后执行它jQuery.getJSON()——从服务端加载用JSON编码过的数据jQuery.get()——从服务端加载数据简单说其中两点一、.ajaxStart()和.ajaxStop()

<!DOCTYPE HTML> 
<html> 
<head> 
<script type="text/javascript" src="test/jquery-1.7.2.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
$('.log1').ajaxStart(function() { 
$(this).text('Triggered ajaxStart handler.'); 
}); 
$('.log2').ajaxStop(function() { 
$(this).text('Triggered ajaxStop handler.'); 
}); 
$('.trigger').click(function() { 
$('.result').load('xixi.html'); 
}); 
}); 
</script> 
</head> 
<body> 
<div class="trigger">Trigger</div> 
<div class="result"></div> 
<div class="log1"></div> 
<div class="log2"></div> 
</body> 
</html>

代码中class为result的元素load了一个xixi.html,此文件中的内容随便,只要存在这个文件就行。js执行方法的顺序是先
$(this).text('Triggered ajaxStart handler.');

然后
加载晚xixi.html里的内容到class为result的元素中
最后
$(this).text('Triggered ajaxStop handler.');

二、
.ajaxSend()、.ajaxComplete()、.ajaxSuccess()以及.ajaxError()

[html]
<!DOCTYPE HTML> 
<html> 
<head> 
<script type="text/javascript" src="test/jquery-1.7.2.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
$('.log1').ajaxStart(function() { 
$(this).text('Triggered ajaxStart handler.');//【1】 
}); 
$('.log2').ajaxStop(function() { 
$(this).text('Triggered ajaxStart handler.');//【5】 
}); 
$('.result').ajaxSend(function() { 
$(this).text('Triggered ajaxSend handler.');//【2】 
}); 
$('.result').ajaxComplete(function() { 
$(this).text('Triggered ajaxComplete handler.');//【4】 
}); 
$('.result').ajaxSuccess(function() { 
$(this).text('Triggered ajaxSuccess handler.');//【3】 
}); 
$(".result").ajaxError(function() { 
$(this).text( "Triggered ajaxError handler." ); 
}); 
$('.trigger').click(function() { 
$('.result').load('xixi.html'); 
}); 
}); 
</script> 
</head> 
<body> 
<div class="trigger">Trigger</div> 
<div class="result"></div> 
<div class="log1"></div> 
<div class="log2"></div> 
</body> 
</html>

上述代码中还是class为result的加载一个html文件。
执行顺序代码中已经标出
如果请求过程中出现什么错误,比如说文件不存在等,就会执行.ajaxError()中的方法而不是.ajaxSuccess()中的。
以前总是对ajax认识很乱,现在有个全面的认识,总结一下,希望共同学习,另外请求中的方式是HTTP GET还是HTTP POST也是值得研究的。
jquery中介绍ajax的地址ajax的使用
Andy_能力越到责任越大
Javascript 相关文章推荐
改版了网上的一个js操作userdata
Apr 27 Javascript
javascript suggest效果 自动完成实现代码分享
Feb 17 Javascript
jQuery建立一个按字母顺序排列的友好页面索引(兼容IE6/7/8)
Feb 26 Javascript
Jquery实现的一种常用高亮效果示例代码
Jan 28 Javascript
javascript生成随机大小写字母的方法
Feb 20 Javascript
node.js中的定时器nextTick()和setImmediate()区别分析
Nov 26 Javascript
jQuery插件简单实现方法
Jul 18 Javascript
js将滚动条滚动到指定位置的简单实现方法
Jun 25 Javascript
Angular2-primeNG文件上传模块FileUpload使用详解
Jan 14 Javascript
微信小程序 本地数据读取实例
Apr 27 Javascript
微信小程序 开发MAP(地图)实例详解
Jun 27 Javascript
vuex+axios+element-ui实现页面请求loading操作示例
Feb 02 Javascript
jquery validate poshytip 自定义样式
Nov 26 #Javascript
一个可拖拽列宽表格实例演示
Nov 26 #Javascript
JS编程小常识很有用
Nov 26 #Javascript
javascript:history.go()和History.back()的区别及应用
Nov 25 #Javascript
js实现拖拽 闭包函数详细介绍
Nov 25 #Javascript
jquery miniui 教程 表格控件 合并单元格应用
Nov 25 #Javascript
JavaScript mapreduce工作原理简析
Nov 25 #Javascript
You might like
PHP下一个非常全面获取图象信息的函数
2008/11/20 PHP
php调用c接口无错版介绍
2014/03/11 PHP
php7安装mongoDB扩展的方法分析
2017/08/02 PHP
PHP实现求解最长公共子串问题的方法
2017/11/17 PHP
Docker搭建自己的PHP开发环境
2018/02/24 PHP
javascript静态的url如何传递
2007/05/03 Javascript
Mootools 1.2教程 滑动效果(Slide)
2009/09/15 Javascript
JS实现点击颜色块切换指定区域背景颜色的方法
2015/02/25 Javascript
总结JavaScript三种数据存储方式之间的区别
2016/05/03 Javascript
js仿支付宝多方框输入支付密码效果
2016/09/27 Javascript
jquery删除table当前行的实例代码
2016/10/07 Javascript
基于jQuery制作小图标上下滑动特效
2017/01/18 Javascript
JS实现加载时锁定HTML页面元素的方法
2017/06/24 Javascript
jQuery 利用ztree实现树形表格的实例代码
2017/09/27 jQuery
vue获取input输入值的问题解决办法
2017/10/17 Javascript
ui-router中使用ocLazyLoad和resolve的具体方法
2017/10/18 Javascript
Bootstrap-table使用footerFormatter做统计列功能
2018/09/07 Javascript
原生JS实现的自动轮播图功能详解
2018/12/28 Javascript
vue 组件内获取actions的response方式
2019/11/08 Javascript
[54:08]LGD女子刀塔学院 DOTA2炼金术士教学
2014/01/09 DOTA
[01:03:42]VP vs VGJ.S 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
用Python计算三角函数之atan()方法的使用
2015/05/15 Python
Python实现优先级队列结构的方法详解
2016/06/02 Python
python安装PIL模块时Unable to find vcvarsall.bat错误的解决方法
2016/09/19 Python
使用C++扩展Python的功能详解
2018/01/12 Python
python实现全盘扫描搜索功能的方法
2019/02/14 Python
python Pandas库基础分析之时间序列的处理详解
2019/07/13 Python
win10系统下python3安装及pip换源和使用教程
2020/01/06 Python
基于python求两个列表的并集.交集.差集
2020/02/10 Python
pytorch 限制GPU使用效率详解(计算效率)
2020/06/27 Python
使用CSS3制作饼状旋转载入效果的实例
2015/06/23 HTML / CSS
英国家喻户晓的高街品牌:River Island
2017/11/28 全球购物
兼职安全员岗位职责
2015/02/15 职场文书
幼儿园教师培训心得体会
2016/01/21 职场文书
用Python将库打包发布到pypi
2021/04/13 Python
SQLServer权限之只开启创建表权限
2022/04/12 SQL Server