jQuery使用ajaxStart()和ajaxStop()方法
程序员文章站
2023-12-30 16:00:04
...
ajaxStart()
和ajaxStop()
方法是绑定Ajax事件。ajaxStart()方法用于在Ajax请求发出前触发函数,ajaxStop()方法用于在Ajax请求完成后触发函数。它们的调用格式为:$(selector).ajaxStart(function())
和$(selector).ajaxStop(function())
其中,两个方法中括号都是绑定的函数,当发送Ajax请求前执行ajaxStart()
方法绑定的函数,请求成功后,执行ajaxStop ()方法绑定的函数。
例如,在调用ajax()
方法请求服务器数据前,使用动画显示正在加载中,当请求成功后,该动画自动隐藏,如下图所示:
在浏览器中显示的效果:
从图中可以看出,由于使用ajaxStart()
和ajaxStop()
方法绑定了动画元素,因此,在开始发送Ajax请求时,元素显示,请求完成时,动画元素自动隐藏。
注意:该方法在1.8.2下使用是正常的
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>使用ajaxStart()和ajaxStop()方法</title> <script src="http://libs.baidu.com/ jquery /1.8.2/jquery.js" type="text/ javascript "></script> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <p id="ptest"> <p class="title"> <span class="fl">加载一段文字</span> <span class="fr"> <input id="btnShow" type="button" value="加载" /> </span> </p> <ul> <li id="pload"></li> </ul> </p> <script type="text/javascript"> $(function () { $("#pload").ajaxStart(function(){ $(this).html("正在请求数据..."); }); $("#pload").ajaxStop(function(){ $(this).html("数据请求完成!"); }); $("#btnShow").bind("click", function () { var $this = $(this); $.ajax({ url: "http://www.imooc.com/data/info_f.php", dataType: "json", success: function (data) { $this.attr("disabled", "true"); $("ul").append("<li>我的名字叫:" + data.name + "</li>"); $("ul").append("<li>男朋友对我说:" + data.say + "</li>"); } }); }) }); </script> </body> </html>
以上就是jQuery使用ajaxStart()和ajaxStop()方法的详细内容,更多请关注其它相关文章!
推荐阅读
-
tfn2k使用方法和对策(1)
-
AI钢笔工具使用技巧和方法介绍
-
jQuery Validator验证Ajax提交表单的方法和Ajax传参的方法(图文教程)
-
配置Nginx多核CPU,worker_cpu_affinity使用方法和范例 affinity ds2 2 affinity 28 affinity
-
Android获取当前应用分配的最大内存和目前使用内存的方法
-
PHP获取ip对应地区和使用网络类型的方法,phpip
-
python使用range函数计算一组数和的方法
-
jQuery.buildFragment使用方法及思路分析
-
vue引入jquery和bootstrap的方法
-
PHP获取ip对应地区和使用网络类型的方法