jquery.ajax之beforeSend方法使用介绍


Posted in Javascript onDecember 08, 2014

常见的一种效果,在用ajax请求时,没有返回前会出现前出现一个转动的loading小图标或者“内容加载中..”,用来告知用户正在请求数据。这个就可以用beforeSend方法来实现。

下载demo:ajax loading

代码如下:

function test_ajax(){

   $.ajax(

   {

      type:"GET",//通常会用到两种:GET,POST。默认是:GET

      url:"a.php",//(默认: 当前页地址) 发送请求的地址

      dataType:"html",//预期服务器返回的数据类型。

      beforeSend:beforeSend, //发送请求

      success:callback, //请求成功

      error:error,//请求出错 

      complete:complete//请求完成

   });

}

function error(XMLHttpRequest, textStatus, errorThrown){

  // 通常情况下textStatus和errorThown只有其中一个有值 

  $("#showResult").append("<div>请求出错啦!</div>");

}

function beforeSend(XMLHttpRequest){

  $("#showResult").append("<div><img src='loading.gif' /><div>");

}

function complete(XMLHttpRequest, textStatus){

  $("#showResult").remove();

}

function callback(msg){

  $("#showResult").append("<div>请求成功,回传数:"+msg+"<div>");

}

方法beforeSend,用于在向服务器发送请求前添加一些处理函数。这是一个ajax事件,在ajax请求开始之前就被触发,通常允许用户修改XMLHttpRequest对象(比如说设置附加的头部信息),关于ajax事件的解释可参考文档:http://docs.jquery.com/Ajax_Events

我们还见到一种情况,很多网站在加载内容的过程中给出“数据加载中,请稍候”的提示,当内容被加载完毕后显示内容。可以设置默认文本显示为加载中的提示,当内容加载完毕时,我们可以通过ID选择器,将该标签中的文本替换成最终的内容。以此来取代beforeSend,效率更高。

什么时候用beforeSend,什么时候用文本替换,取决于ajax请求前后你所展示的DOM元素是否一致,如果你所展示的DOM元素在请求之前已经存在,那么通过上述文本替换的方式来处理会好些,如果除此以外你还需增加其他的需求,那么还是用beforeSend来处理吧。

Javascript 相关文章推荐
javascript中的对象和数组的应用技巧
Jan 07 Javascript
JavaScript中判断函数是new还是()调用的区别说明
Apr 07 Javascript
jquery ready函数、css函数及text()使用示例
Sep 27 Javascript
jQuery实现级联菜单效果(仿淘宝首页菜单动画)
Apr 10 Javascript
jquery-syntax动态语法着色示例代码
May 14 Javascript
JQuery和PHP结合实现动态进度条上传显示
Nov 23 Javascript
JavaScript浏览器对象模型BOM(BrowserObjectModel)实例详解
Nov 29 Javascript
AngularJS指令与控制器之间的交互功能示例
Dec 14 Javascript
微信小程序用户自定义模版用法实例分析
Nov 28 Javascript
详解JavaScript基础知识(JSON、Function对象、原型、引用类型)
Jan 16 Javascript
layui中table表头样式修改方法
Aug 15 Javascript
原生JavaScript实现留言板
Jan 10 Javascript
实例讲解JQuery中this和$(this)区别
Dec 08 #Javascript
Jquery实现由下向上展开效果的例子
Dec 08 #Javascript
Javascript常用字符串判断函数代码分享
Dec 08 #Javascript
jQuery/CSS3图片特效插件整理推荐
Dec 07 #Javascript
web前端设计师们常用的jQuery特效插件汇总
Dec 07 #Javascript
基于jQuery实现的文字按钮表单特效整理
Dec 07 #Javascript
基于jQuery实现的图片切换焦点图整理
Dec 07 #Javascript
You might like
测试PHP连接MYSQL成功与否的代码
2013/08/16 PHP
php通过session防url攻击方法
2014/12/10 PHP
PHP答题类应用接口实例
2015/02/09 PHP
php生成过去100年下拉列表的方法
2015/07/20 PHP
php邮件发送的两种方式
2020/04/28 PHP
Laravel中任务调度console使用方法小结
2017/05/07 PHP
jquery div 居中技巧应用介绍
2012/11/24 Javascript
javascript 构造函数强制调用经验总结
2012/12/02 Javascript
浅谈javascript中createElement事件
2014/12/05 Javascript
JS控制层作圆周运动的方法
2016/06/20 Javascript
Vue概念及常见命令介绍(1)
2016/12/08 Javascript
Angular路由简单学习
2016/12/26 Javascript
vue中axios解决跨域问题和拦截器的使用方法
2018/03/07 Javascript
vue+axios+mock.js环境搭建的方法步骤
2018/08/28 Javascript
angular4中引入echarts的方法示例
2019/01/29 Javascript
微信小程序如何再次获取用户授权的方法
2019/05/10 Javascript
15分钟学会vue项目改造成SSR(小白教程)
2019/12/17 Javascript
原生js实现文件上传、下载、封装等实例方法
2020/01/05 Javascript
[47:22]Mineski vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python读取oracle函数返回值
2016/07/18 Python
numpy.transpose对三维数组的转置方法
2018/04/17 Python
Python+OpenCV实现图像的全景拼接
2020/03/05 Python
xadmin使用formfield_for_dbfield函数过滤下拉表单实例
2020/04/07 Python
Python本地及虚拟解释器配置过程解析
2020/10/13 Python
python 装饰器重要在哪
2021/02/14 Python
使用CSS3制作饼状旋转载入效果的实例
2015/06/23 HTML / CSS
为你的html5网页添加音效示例
2014/04/03 HTML / CSS
瑰珀翠美国官网:Crabtree & Evelyn美国
2016/11/29 全球购物
美国在线乐器和设备商店:Musician’s Friend
2018/07/06 全球购物
美国鲜花递送:UrbanStems
2021/01/04 全球购物
英国在线定做百叶窗网站:Make My Blinds
2020/08/17 全球购物
社区十八大感言
2014/01/19 职场文书
管理建议书范文
2014/05/13 职场文书
另类冲刺标语
2014/06/24 职场文书
忠诚教育心得体会
2014/09/03 职场文书
终止劳动合同通知书
2015/04/16 职场文书