545day(jquery-ajax-event.html）

原创于 2019-04-03 00:27:49 发布 · 132 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了一个使用jQuery实现的全局事件处理机制，通过ajaxStart和ajaxStop事件来控制页面加载提示的显示与隐藏，增强了用户体验。

《2019年4月3日》【连续 545天】

标题：jquery-ajax-event.html；
内容：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>jQuery全局事件处理函数</title>
  <style>
    .loading {
      display: none;
      position: fixed;
    }
  </style>
</head>
<body>
  <div class="loading">正在玩命加载中...</div>
  <button id="btn">请求</button>
  <script src="jquery.js"></script>
  <script>

    $(document)
      .ajaxStart(function () {
        // 只要有 ajax 请求发生 就会执行
        $('.loading').fadeIn()
        // 显示加载提示
        console.log('注意即将要开始请求了')
      })
      .ajaxStop(function () {
        // 只要有 ajax 请求结束 就会执行
        $('.loading').fadeOut()
        // 结束提示
        console.log('请求结束了')
      })

    $('#btn').on('click', function () {
      // $.ajax({
      //   url: 'time.php'
      // })

      $.get('time.php')
    })

  </script>
</body>
</html>