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 相关文章推荐
获取任意Html元素与body之间的偏移距离 offsetTop、offsetLeft (For:IE5+ FF1 )[
Dec 22 Javascript
jquery实现商品拖动选择效果代码(自写)
May 28 Javascript
改变隐藏的input中value的值代码
Dec 30 Javascript
IE6 hack for js 集锦
Sep 23 Javascript
jQuery中DOM树操作之复制元素的方法
Jan 23 Javascript
jQuery过滤HTML标签并高亮显示关键字的方法
Aug 07 Javascript
jQuery Validate插件实现表单强大的验证功能
Dec 18 Javascript
vue.js 使用v-if v-else发现没有执行解决办法
May 15 Javascript
通过V8源码看一个关于JS数组排序的诡异问题
Aug 14 Javascript
vue中使用elementUI组件手动上传图片功能
Dec 13 Javascript
基于JavaScript获取url参数2种方法
Apr 17 Javascript
js不常见操作运算符总结
Nov 20 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之第六天
2006/10/09 PHP
php桌面中心(四) 数据显示
2007/03/11 PHP
php Static关键字实用方法
2010/06/04 PHP
从php核心代码分析require和include的区别
2011/01/02 PHP
兼容性最强的PHP生成缩略图的函数代码(修改版)
2011/01/18 PHP
Php中用PDO查询Mysql来避免SQL注入风险的方法
2013/04/25 PHP
php实现给图片加灰色半透明效果的方法
2014/10/20 PHP
PHP获取文件扩展名的4种方法
2015/11/24 PHP
php 实现301重定向跳转实例代码
2016/07/18 PHP
php面向对象的用户登录身份验证
2017/06/08 PHP
jQuery 创建Dom元素
2010/05/07 Javascript
Js-$.extend扩展方法使方法参数更灵活
2013/01/15 Javascript
js汉字转拼音实现代码
2013/02/06 Javascript
红米手机抢购的js代码
2014/03/10 Javascript
JavaScript实现星星等级评价功能
2017/03/22 Javascript
原生js jquery ajax请求以及jsonp的调用方法
2017/08/04 jQuery
js推箱子小游戏步骤代码解析
2018/01/10 Javascript
微信小程序解除10个请求并发限制
2018/12/18 Javascript
js使用cookie实现记住用户名功能示例
2019/06/13 Javascript
layui(1.0.9)文件上传upload,前后端的实例代码
2019/09/26 Javascript
jQuery实现轮播图效果demo
2020/01/11 jQuery
详解Python中的序列化与反序列化的使用
2015/06/30 Python
Numpy array数据的增、删、改、查实例
2018/06/04 Python
python如何获取当前文件夹下所有文件名详解
2019/01/25 Python
利用python在大量数据文件下删除某一行的例子
2019/08/21 Python
Python 3.6打包成EXE可执行程序的实现
2019/10/18 Python
解决IDEA 的 plugins 搜不到任何的插件问题
2020/05/04 Python
Python numpy矩阵处理运算工具用法汇总
2020/07/13 Python
CSS3 简单又实用的5个属性
2010/03/04 HTML / CSS
Willer台湾:日本高速巴士/夜行巴士预约
2017/07/09 全球购物
税务职业生涯规划书范文
2014/09/16 职场文书
中学生社区服务活动报告
2015/02/05 职场文书
小学2016年第十八届推普周活动总结
2016/04/05 职场文书
python字典的元素访问实例详解
2021/07/21 Python
5人制售《绝地求生》游戏外挂获利500多万元 被判刑
2022/03/31 其他游戏
Elasticsearch 基本查询和组合查询
2022/04/19 Python