jquery的ajax请求全面了解


Posted in Javascript onMarch 20, 2013

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()
<!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的使用

Javascript 相关文章推荐
Prototype Class对象学习
Jul 19 Javascript
Js基础学习资料
Nov 23 Javascript
通过js简单实现将一个文本内容转译成加密文本
Oct 22 Javascript
JS实现太极旋转思路分析
Dec 09 Javascript
JS及JQuery对Html内容编码,Html转义
Feb 17 Javascript
node.js通过axios实现网络请求的方法
Mar 05 Javascript
代码整洁之道(重构)
Oct 25 Javascript
js实现导航跟随效果
Nov 17 Javascript
Vuex模块化应用实践示例
Feb 03 Javascript
原生js实现点击轮播切换图片
Feb 11 Javascript
vant实现购物车功能
Jun 29 Javascript
在vue中使用回调函数,this调用无效的解决
Aug 11 Javascript
js控制滚动条缓慢滚动到顶部实现代码
Mar 20 #Javascript
JSON+JavaScript处理JSON的简单例子
Mar 20 #Javascript
js或者jquery判断图片是否加载完成实现代码
Mar 20 #Javascript
javascript 三种方法实现获得和设置以及移除元素属性
Mar 20 #Javascript
asp.net中System.Timers.Timer的使用方法
Mar 20 #Javascript
js控制的回到页面顶端goTop的代码实现
Mar 20 #Javascript
让图片旋转任意角度及JQuery插件使用介绍
Mar 20 #Javascript
You might like
PHP利用REFERER根居访问来地址进行页面跳转
2013/09/28 PHP
11个PHPer必须要了解的编程规范
2014/09/22 PHP
TP3.2批量上传文件或图片 同名冲突问题的解决方法
2017/08/01 PHP
div+css布局的图片连续滚动js实现代码
2010/05/04 Javascript
jQuery EasyUI API 中文文档 - NumberSpinner数值微调器使用介绍
2011/10/21 Javascript
jquery简单的弹出层浮动层代码
2015/04/27 Javascript
Mongoose学习全面理解(推荐)
2017/01/21 Javascript
利用jQuery解析获取JSON数据
2017/04/08 jQuery
React组件重构之嵌套+继承及高阶组件详解
2018/07/19 Javascript
vue中js判断长时间不操作界面自动退出登录(推荐)
2020/01/22 Javascript
[48:31]DOTA2-DPC中国联赛 正赛 Dynasty vs XG BO3 第一场 2月2日
2021/03/11 DOTA
python实现创建新列表和新字典,并使元素及键值对全部变成小写
2019/01/15 Python
python3.4爬虫demo
2019/01/22 Python
使用Django开发简单接口实现文章增删改查
2019/05/09 Python
pandas 时间格式转换的实现
2019/07/06 Python
Python Threading 线程/互斥锁/死锁/GIL锁
2019/07/21 Python
Python GUI编程学习笔记之tkinter界面布局显示详解
2020/03/30 Python
pygame实现弹球游戏
2020/04/14 Python
pycharm 复制代码出现空格的解决方式
2021/01/15 Python
Flask中jinja2的继承实现方法及实例
2021/03/03 Python
HTML5 Canvas图像模糊完美解决办法
2018/02/06 HTML / CSS
美国女孩服装购物网站:Justice
2017/03/04 全球购物
英国音乐设备和乐器商店:Gear4music
2017/10/16 全球购物
日本最大的药妆连锁店:Matsukiyo松本清药妆店
2017/11/23 全球购物
俄罗斯珠宝市场的领导者之一:Бронницкий ювелир
2019/10/02 全球购物
农药学硕士毕业生自荐信
2013/09/25 职场文书
工程造价与财务管理专业应届生求职信
2013/10/06 职场文书
学生励志演讲稿
2014/01/06 职场文书
法学院方阵解说词
2014/01/29 职场文书
卖车协议书
2014/04/21 职场文书
2014年车间主任工作总结
2014/12/10 职场文书
文言文辞职信
2015/02/28 职场文书
六年级作文之预言作文
2019/10/25 职场文书
redis配置文件中常用配置详解
2021/04/14 Redis
看完这篇文章获得一些java if优化技巧
2021/07/15 Java/Android
vue中控制mock在开发环境使用,在生产环境禁用方式
2022/04/06 Vue.js