很多元素在ajax请求开始和请求完成时触发相同的事件（ajaxStart()、ajaxComplete()）

最新推荐文章于 2022-11-24 11:27:48 发布

Binglili0809

最新推荐文章于 2022-11-24 11:27:48 发布

阅读量170

点赞数

分类专栏： ajax

本文链接：https://blog.csdn.net/Binglili0809/article/details/108604202

版权

ajax 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <title>title</title>
  <style>
    .cover {
      height: 100%;
      width: 100%;
      position: absolute;
      left: 0;
      top: 0;
      background-color: skyblue;
      opacity: .5;
      display: none;
    }
  </style>
</head>

<body>
  <h2>jQuery_ajax使用补充</h2>
  <input class='json' type="button" value='获取JSON'>
  <input class='XML' type="button" value='获取XML'>
  <div class="cover"></div>
</body>

</html>
<script src="./jquery-1.12.4.min.js"></script>

<script>
  $(function () {
    $('.json').click(function () {
      // 开启
      $.ajax({
        url: '../00.backData/backJSON.php',
        success: function (data) {
          console.log(data);
          // 关闭
        },
        // 人为的指定 返回的数据格式
        dataType: 'json'
      })
    })
    $('.XML').click(function () {
      // 开启
      $.ajax({
        url: '../00.backData/backXML.php',
        success: function (data) {
          console.log(data);
          // 关闭
        },
        // 人为的指定 返回的数据格式
        dataType: 'xml'
      })
    })
  })

  //请求开始
  $(document).ajaxStart(function(){
    $('.cover').show();
  });
//请求完成
$(document).ajaxComplete(function(){
  $('.cover').hide();
});
  /*
    离线文档 可能有错误
      去官方文档查询最新的 使用方式
  */ 
</script>