纯净、安全、绿色的下载网站

首页|软件分类|下载排行|最新软件|IT学院

当前位置:首页IT学院IT技术

AJAX指定部分页面刷新效果 AJAX实现指定部分页面刷新效果

不争亦不屑   2021-10-14 我要评论
想了解AJAX实现指定部分页面刷新效果的相关内容吗,不争亦不屑在本文为您仔细讲解AJAX指定部分页面刷新效果的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:AJAX指定部分页面刷新,AJAX刷新效果,AJAX页面刷新,下面大家一起来学习吧。

这个例子使用了bootstrap,jQuery和NProgress进度条插件,事先需引入相关文件。

需求:点击左边的选项,不需要整个页面刷新,只进行右边页面的刷新。


这里需要三个文件

work.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>主页面</title>
</head>
<body>
      <main id="main">
        <h2>这是工作经验界面</h2>
        <hr>
      </main>
</body>
</html>

hobbit.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>主页面</title>
</head>
<body>
      <main id="main">
        <h2>这是兴趣爱好界面</h2>
        <hr>
      </main>
</body>
</html>

index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>主页面</title>
  <link rel="stylesheet" href="bootstrap.min.css" rel="external nofollow" >
  <link rel="stylesheet" href="../nprogress.css" rel="external nofollow" >
  <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="work.html" >工作经验</a>
          <a class="list-group-item list-group-item-action" href="hobbit.html" >兴趣爱好</a>
        </div>
      </aside>
      <main id="main" class="col-md-9">
        <h2>这是我的个人信息界面</h2>
        <hr>
      </main>
    </div>
  </div>
  <script src="../jquery-3.4.1.js"></script>
  <script>
    $(function ($) {
  // 入口函数带参数$,原因是有一个独立的作用域,顺便确保页面加载完成执行

  //全局AJAX事件处理
      $(document)
        .ajaxStart(function () {
          NProgress.start()
        })
        .ajaxStop(function () {
          NProgress.done()
        });
      $('.list-group-item').on('click', function () {
        var url = $(this).attr('href')
        //后面的 #main 指的是载入页面的 id 
        $('#main').load(url + ' #main > *')
        //列表组中是 a 标签,禁止它跳转到相应界面
        return false
      })
    })
  </script>
</body>
</html>

相关文章

猜您喜欢

  • Spring BeanPostProcessor后置处理器 Spring BeanPostProcessor(后置处理器)的用法

    想了解Spring BeanPostProcessor(后置处理器)的用法的相关内容吗,波波烤鸭在本文为您仔细讲解Spring BeanPostProcessor后置处理器的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:Spring,BeanPostProcessor,后置处理器,下面大家一起来学习吧。..
  • HTML基础 HTML基础详解(下)

    想了解HTML基础详解(下)的相关内容吗,胡八一在本文为您仔细讲解HTML基础的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:HTML基础,HTML基础详解,下面大家一起来学习吧。..

网友评论

Copyright 2020 www.SoftYun.net 【软件云】 版权所有 软件发布

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 点此查看联系方式