jQuery里面的ajax用法-------底层到应用(第二堂课-局部刷新和loading功能)

最新推荐文章于 2023-04-25 08:50:02 发布

itwangyang520

最新推荐文章于 2023-04-25 08:50:02 发布

阅读量221

点赞数 1

分类专栏： WEB前端知识 javascript JavaScript的 web前短学习路线

本文链接：https://blog.csdn.net/itwangyang520/article/details/89981158

版权

WEB前端知识同时被 3 个专栏收录

47 篇文章 0 订阅

订阅专栏

javascript

26 篇文章 0 订阅

订阅专栏

JavaScript的

17 篇文章 0 订阅

订阅专栏

这里面我们运用bootstrap4，来用写一个布局，就是长得这样子的

实现局部加载，并且实现loading功能

下面标注这些官网都是有的，可以自己搜索一下

好了，下来开始撸码了

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>主页面</title>
  <link rel="stylesheet" href="bootstrap.css">
  <link rel="stylesheet" href="nprogress.css">
  <style>
    .loading {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      background-color: rgba(0, 0, 0, .6);
      font-size: 30px;
    }
  </style>
  <script src="nprogress.js"></script>
</head>
<body>
  <div class="container pt-4">
    <h1>会员中心</h1>
    <hr>
    <div class="row">
      <aside class="col-md-3">
        <div class="list-group">
          <a class="list-group-item list-group-item-action" href="index.html">我的资料</a>
          <a class="list-group-item list-group-item-action" href="cart.html">我的购物车</a>
          <a class="list-group-item list-group-item-action" href="orders.html">我的订单</a>
        </div>
      </aside>
      <main id="main" class="col-md-9">
        <h2>我的个人资料</h2>
        <hr>
      </main>
    </div>
  </div>
  <div class="loading">正在玩命加载中...</div>
  <script src="../jquery.js"></script>
  <script>
    $(function ($) {


        $(document).ajaxStart(function () {
            //    只要有ajax请求，请求发生，就会执行
            NProgress.start();
        });
        $(document).ajaxStop(function () {
            //只要有ajax请求结束就会执行
            NProgress.done();
        });




        //写入口函数目的是什么：有一个独立的作用域，顺便确保页面加载完成执行
        $('.list-group-item').on('click',function () {
            var url = $(this).attr('href');
            $('#main').load(url + ' #main>*');
            return false;
        })
    })
  </script>
</body>
</html>

cart.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>主页面</title>
  <link rel="stylesheet" href="bootstrap.css">
</head>
<body>
  <div class="container pt-4">
    <h1>会员中心</h1>
    <hr>
    <div class="row">
      <aside class="col-md-3">
        <div  class="list-group">
          <a class="list-group-item list-group-item-action" href="index.html">我的资料</a>
          <a class="list-group-item list-group-item-action" href="cart.html">我的购物车</a>
          <a class="list-group-item list-group-item-action" href="orders.html">我的订单</a>
        </div >
      </aside>
      <main id="main" class="col-md-9">
        <h2>我的购物车</h2>
        <hr>
      </main>
    </div>
  </div>
</body>
</html>

orders.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>主页面</title>
  <link rel="stylesheet" href="bootstrap.css">
</head>
<body>
  <div class="container pt-4">
    <h1>会员中心</h1>
    <hr>
    <div class="row">
      <aside class="col-md-3">
        <div  class="list-group">
          <a class="list-group-item list-group-item-action" href="index.html">我的资料</a>
          <a class="list-group-item list-group-item-action" href="cart.html">我的购物车</a>
          <a class="list-group-item list-group-item-action" href="orders.html">我的订单</a>
        </div >
      </aside>
      <main id="main" class="col-md-9">
        <h2>我的订单</h2>
        <hr>
      </main>
    </div>
  </div>
</body>
</html>

其实也没有什么神奇的地方：看代码，

<div class="loading">正在玩命的加载...</div>

<script src="jquery.js"></script>
<script>

  $(document).ajaxStart(function () {
  //    只要有ajax请求，请求发生，就会执行
  });
  $(document).ajaxStop(function () {
     //只要有ajax请求结束就会执行
  });

  $.ajax({
      url:'time.php',
      //其实这个beforeSend，complete是钩子函数，哈哈,vue,react，angular学过的小伙伴们都是知道的，现在前端mv*的形式都是
      beforeSend:function (xhr) {
          //显示加载提示
          $(".loading").fadeIn();
          console.log(xhr+'马上要开始请求了');
      },
      complete:function (xhr) {
          //结束提示
          $(".loading").fadeOut();
          console.log(xhr+'请求结束了');
      }
  })
</script>

这下子就学会了局部刷新加载和loading了。是不是很so easy！

itwangyang520

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
jQuery里面的ajax用法-------底层到应用(第二堂课-局部刷新和loading功能)

这里面我们运用bootstrap4，来用写一个布局，就是长得这样子的实现局部加载，并且实现loading功能下面标注这些官网都是有的，可以自己搜索一下好了，下来开始撸码了index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"...
复制链接

扫一扫