AJAX---load方法

load方法

 

vscode安装完live server后,用本地端口打开就好了

但是nprogress的文件全部放在load文件夹下才没有问题

否则有跨域的bug

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

 

      //用nprogress后的代码
      $(document)
        .ajaxStart(function () {
          NProgress.start()
        })
        .ajaxStop(function () {
          NProgress.done()
        })

 

 

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;
      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 请求发生 就会执行
      //     $('.loading').fadeIn()
      //     // 显示加载提示
      //     console.log('注意即将要开始请求了')
      //   })
      //   .ajaxStop(function () {
      //     // 只要有 ajax 请求结束 就会执行
      //     $('.loading').fadeOut()
      //     // 结束提示
      //     console.log('请求结束了')
      //   })

      //用nprogress后的代码
      $(document)
        .ajaxStart(function () {
          NProgress.start()
        })
        .ajaxStop(function () {
          NProgress.done()
        })

      // 有一个独立的作用域,顺便确保页面加载完成执行
      $('.list-group-item').on('click', function () {
        var url = $(this).attr('href')
        $('#main').load(url + ' #main > *')
        return false
      })
    })
  script>
body>

html>

 

AJAX---load方法_第1张图片

 

你可能感兴趣的:(AJAX---load方法)