Ajax开始执行时触发 ajaxStart() | Ajax 执行结束后触发 ajaxStop()

最新推荐文章于 2022-11-25 14:25:35 发布

无盐海

最新推荐文章于 2022-11-25 14:25:35 发布

阅读量4.2k

点赞数 1

分类专栏： AJAX | JSON

本文链接：https://blog.csdn.net/Fanbin168/article/details/45080881

版权

AJAX | JSON 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

《1》

<html>
<head>
    <title></title>
    <script src="jquery-1.11.2.js"></script>
</head>
<body>
    <label for="UserId">请输入用户的ID编号:</label><input type="text" id="UserId" name="UserId" style="width:20px" />
    <input type="button" id="btnClick" value="提交" />
    <div id="loadMes" style="display:none">我正在努力加载中哦.....</div>
    <div id="loadData"></div>
</body>
</html>

<script type="text/javascript">
    $(function () {
        $("#btnClick").click(function () {
            var id=$("#UserId").val();
            $.get("loadHandler.ashx", { id: id }, function (data, status, jsXHR) {
                $("#loadData").text(data);
            });
        });

        //ajaxStart()与ajaxStop()这两个全局事件必须绑定在document元素上。

        //在Ajax异步发送请求时，遇到网速比较慢的时候，就会出现请求比时间较长的问题，用户等的不耐烦就会关闭页面。而如果在请求期间能给用户一些提示。比如：正在努力加载中... 那么用户可能会等久一点，体验就业好一些了。

        //jquery提供了两个全局事件，ajaxStart()和ajaxStop() 这两个全局事件，只要用户触发了Ajax,请求开始（仅仅是准备开始请求，还未完成请求）那么就会触发ajaxStart()这个事件。  当用户请求结束的时候就会触发ajaxStop()事件

        $(document).ajaxStart(function () { $("#loadMes").show(); }).ajaxStop(function () { $("#loadMes").hide(); alert("加载完毕") });

        //当然我们也可以分开来写

        $(document).ajaxStart(function () { $("#loadMes").show() });
        $(document).ajaxStop(function () { $("#loadMes").hide(); alert("请求完毕") })
        
    })

</script>

当点击提交按钮的时候显示 “我正在努力加载中哦....”

无盐海

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
Ajax开始执行时触发 ajaxStart() | Ajax 执行结束后触发 ajaxStop()

《1》请输入用户的ID编号: 我正在努力加载中哦..... $(function () { $("#btnClick").click(function () { var id=$("#UserId").val(); $.get("loadHandler.a
复制链接

扫一扫