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:FF/Chrome与IE动态加载元素的区别说明
Jan 26 Javascript
js 模式窗口(模式对话框和非模式对话框)的使用介绍
Jul 17 Javascript
在JavaScript的jQuery库中操作AJAX的方法讲解
Aug 15 Javascript
javascript中字体浮动效果的简单实例演示
Nov 18 Javascript
基于JQuery及AJAX实现名人名言随机生成器
Feb 10 Javascript
Node.js获取前端ajax提交的request信息
Feb 20 Javascript
vue使用stompjs实现mqtt消息推送通知
Jun 22 Javascript
js学习总结之dom2级事件基础知识详解
Jul 27 Javascript
微信小程序仿知乎实现评论留言功能
Nov 28 Javascript
javascript数据类型中的一些小知识点(推荐)
Apr 18 Javascript
小程序实现短信登录倒计时
Jul 12 Javascript
JS实现横向轮播图(中级版)
Jan 18 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 过滤危险html代码
2009/06/29 PHP
PHP 批量删除数据的方法分析
2009/10/30 PHP
php 注释规范
2012/03/29 PHP
php数组索引的Key加引号和不加引号的区别
2014/08/19 PHP
PHP实现创建微信自定义菜单的方法示例
2017/07/14 PHP
jquery判断浏览器类型的代码
2012/11/05 Javascript
jQuery的position()方法详解
2015/07/19 Javascript
jQuery easyui的validatebox校验规则扩展及easyui校验框validatebox用法
2016/01/18 Javascript
JS+Canvas 实现下雨下雪效果
2016/05/18 Javascript
详解Javascript ES6中的箭头函数(Arrow Functions)
2016/08/24 Javascript
BootStrap Validator对于隐藏域验证和程序赋值即时验证的问题浅析
2016/12/01 Javascript
vue中使用gojs/jointjs的示例代码
2018/08/24 Javascript
jQuery 添加元素和删除元素的方法
2020/07/15 jQuery
在vue-cli创建的项目中使用sass操作
2020/08/10 Javascript
JavaScript中CreateTextFile函数
2020/08/30 Javascript
使用vue构建多页面应用的示例
2020/10/22 Javascript
Python中的Classes和Metaclasses详解
2015/04/02 Python
python统计cpu利用率的方法
2015/06/02 Python
Python tornado队列示例-一个并发web爬虫代码分享
2018/01/09 Python
Python callable()函数用法实例分析
2018/03/17 Python
python 内置模块详解
2019/01/01 Python
Python单元和文档测试实例详解
2019/04/11 Python
Python控制Firefox方法总结
2019/06/03 Python
在linux下实现 python 监控usb设备信号
2019/07/03 Python
TensorFlow打印输出tensor的值
2020/04/19 Python
Django DRF认证组件流程实现原理详解
2020/08/17 Python
Python实现Kerberos用户的增删改查操作
2020/12/14 Python
HTML5移动端开发遇见的东西
2019/10/11 HTML / CSS
StubHub意大利:购买和出售全球演唱会和体育赛事门票
2017/11/21 全球购物
Sneaker Studio罗马尼亚网站:购买运动鞋
2018/11/04 全球购物
函授本科自我鉴定
2013/11/03 职场文书
建筑装饰学院室内设计专业个人自我评价
2013/12/07 职场文书
超市端午节活动方案
2014/01/23 职场文书
2015年学校安全工作总结
2015/04/22 职场文书
交通安全主题班会
2015/08/12 职场文书
千万级用户系统SQL调优实战分享
2022/03/03 MySQL