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使用IEEE 标准进行二进制浮点运算产生莫名错误的解决方法
May 28 Javascript
js 单击式的下拉菜单效果实例
Aug 13 Javascript
form.submit()不能提交表单的原因分析
Oct 23 Javascript
详解JavaScript的while循环的使用
Jun 03 Javascript
jQuery定义插件的方法
Dec 18 Javascript
js实现的彩色方块飞舞奇幻效果
Jan 27 Javascript
微信小程序模板之分页滑动栏
Feb 10 Javascript
支持移动端原生js轮播图
Feb 16 Javascript
promise处理多个相互依赖的异步请求(实例讲解)
Aug 03 Javascript
JS库particles.js创建超炫背景粒子插件(附源码下载)
Sep 13 Javascript
基于node+websocket+html实现腾讯课堂聊天室聊天功能
Mar 04 Javascript
JavaScript DOM常用操作代码汇总
Jul 03 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 301转向实现代码
2008/09/18 PHP
php数组保存文本与文本反编成数组实例
2014/11/13 PHP
PHP如何搭建百度Ueditor富文本编辑器
2018/09/21 PHP
JavaScript页面刷新与弹出窗口问题的解决方法
2010/03/02 Javascript
来自国外的页面JavaScript文件优化
2010/12/08 Javascript
删除节点的jquery代码
2014/01/13 Javascript
JS实现仿新浪黄色经典滑动门效果代码
2015/09/27 Javascript
详解JavaScript中Hash Map映射结构的实现
2016/05/21 Javascript
说说Vue.js中的functional函数化组件的使用
2019/02/12 Javascript
vue中利用simplemde实现markdown编辑器(增加图片上传功能)
2019/04/29 Javascript
Bootstrap table 实现树形表格联动选中联动取消功能
2019/09/30 Javascript
JQuery 实现文件下载的常用方法分析
2019/10/29 jQuery
JavaScript创建表格的方法
2020/04/13 Javascript
Vue 封装防刷新考试倒计时组件的实现
2020/06/05 Javascript
微信小程序返回上一级页面的实现代码
2020/06/19 Javascript
[02:35]DOTA2超级联赛专访XB 难忘一年九冠称王
2013/06/20 DOTA
Python2.x版本中基本的中文编码问题解决
2015/10/12 Python
python win32 简单操作方法
2017/05/25 Python
TensorFlow安装及jupyter notebook配置方法
2017/09/08 Python
python实现数据写入excel表格
2018/03/25 Python
从django的中间件直接返回请求的方法
2018/05/30 Python
Python中new方法的详解
2019/01/15 Python
详解Python:面向对象编程
2019/04/10 Python
Python中常用的os操作汇总
2020/11/05 Python
Python字符串的15个基本操作(小结)
2021/02/03 Python
基于CSS3实现立方体自转效果
2016/03/01 HTML / CSS
戴森台湾线上商城:Dyson Taiwan
2018/05/21 全球购物
美国牙科折扣计划:DentalPlans.com
2019/08/26 全球购物
英国设计师泳装、沙滩装和比基尼在线精品店:Beach Cafe
2019/08/28 全球购物
美国传奇滑手Paul Rodriguez创办的街头滑板品牌:Primitive Skateboarding
2019/10/29 全球购物
芭比波朗加拿大官方网站:Bobbi Brown Cosmetics CA
2020/11/05 全球购物
服务承诺书怎么写
2014/05/24 职场文书
保研专家推荐信范文
2015/03/25 职场文书
辩论赛主持人开场白
2015/05/29 职场文书
iPhone13 Pro外观确定,升级4800万镜头,4月20日发新品
2021/04/15 数码科技
开发者首先否认《遗弃》被取消的传言
2022/04/11 其他游戏