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 相关文章推荐
jquery判断字符输入个数(数字英文长度记为1,中文记为2,超过长度自动截取)
Oct 15 Javascript
js Date概念详细介绍
Nov 22 Javascript
Javascript浅谈之引用类型
Dec 18 Javascript
JS去掉第一个字符和最后一个字符的实现代码
Feb 20 Javascript
Linux下编译安装php libevent扩展实例
Feb 14 Javascript
深入探讨javascript函数式编程
Oct 11 Javascript
JS实现颜色梯度与渐变效果完整实例
Dec 30 Javascript
JS中的三个循环小结
Jun 20 Javascript
实例学习JavaScript读取和写入cookie
Jan 29 Javascript
Vue父组件监听子组件生命周期
Sep 03 Javascript
使用TS来编写express服务器的方法步骤
Oct 29 Javascript
解析原生JS getComputedStyle
May 25 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面向对象的使用教程 简单数据库连接
2006/11/25 PHP
php入门学习知识点七 PHP函数的基本应用
2011/07/14 PHP
php实现分页显示
2015/11/03 PHP
PHP中substr函数字符串截取用法分析
2016/01/07 PHP
php正则表达式验证(邮件地址、Url地址、电话号码、邮政编码)
2016/03/14 PHP
浅析Yii2中GridView常见操作
2016/04/22 PHP
Laravel使用memcached缓存对文章增删改查进行优化的方法
2016/10/08 PHP
php实现单笔转账到支付宝功能
2018/10/09 PHP
PHP生成随机字符串实例代码(字母+数字)
2019/09/11 PHP
firefox下input type=&quot;file&quot;的size是多大
2011/10/24 Javascript
JavaScript面向对象之Prototypes和继承
2012/07/12 Javascript
js弹出框轻量级插件jquery.boxy使用介绍
2013/01/15 Javascript
JS中typeof与instanceof之间的区别总结
2013/11/14 Javascript
JS实现带提示的星级评分效果完整实例
2015/10/30 Javascript
jquery 判断div show的状态实例
2016/12/03 Javascript
jQuery中的on与bind绑定事件区别实例详解
2017/02/28 Javascript
jquery操作ul的一些操作笔记整理(干货)
2017/08/31 jQuery
Vue中正确使用jQuery的方法
2017/10/30 jQuery
JavaScript使用面向对象实现的拖拽功能详解
2019/06/12 Javascript
微信小程序 高德地图路线规划实现过程详解
2019/08/05 Javascript
Python使用Flask框架获取当前查询参数的方法
2015/03/21 Python
使用Anaconda3建立虚拟独立的python2.7环境方法
2018/06/11 Python
用Pycharm实现鼠标滚轮控制字体大小的方法
2019/01/15 Python
pandas数据集的端到端处理
2019/02/18 Python
Python帮你微信头像任意添加装饰别再@微信官方了
2019/09/25 Python
python shell命令行中import多层目录下的模块操作
2020/03/09 Python
香港百佳网上超级市场:PARKNSHOP.com
2020/06/10 全球购物
党员个人思想汇报
2013/12/28 职场文书
工作的心得体会
2013/12/31 职场文书
《桃花心木》教学反思
2014/02/17 职场文书
《草原的早晨》教学反思
2014/04/08 职场文书
我爱我家教学反思
2014/05/01 职场文书
经济信息系毕业生自荐信
2014/06/02 职场文书
电教室标语
2014/06/20 职场文书
读《庄子》有感:美而不自知
2019/11/06 职场文书
光之国的四大叛徒:第一贝利亚导致宇宙毁灭,赛文奥特曼在榜
2022/03/18 日漫