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


Posted in Javascript onOctober 16, 2021

本文实例为大家分享了AJAX实现指定部分页面刷新效果的具体代码,供大家参考,具体内容如下

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

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

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

这里需要三个文件

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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery 获取对象 基本选择与层级
May 31 Javascript
指定区域的图片自动按比例缩小的js代码(防止页面被图片撑破)
Feb 21 Javascript
js获取鼠标点击的位置实现思路及代码
May 09 Javascript
js获取日期:昨天今天和明天、后天
Jun 11 Javascript
javascript制作网页图片上实现下雨效果
Feb 26 Javascript
jQuery simpleModal插件的使用介绍
Aug 30 Javascript
JS数字千分位格式化实现方法总结
Dec 16 Javascript
理解javascript中的Function.prototype.bind的方法
Feb 03 Javascript
PHP实现记录代码运行时间封装类实例教程
May 08 Javascript
Vue组件之高德地图地址选择功能的实例代码
Jun 21 Javascript
vue draggable resizable gorkys与v-chart使用与总结
Sep 05 Javascript
四十九个javascript小知识实用技巧
Nov 20 Javascript
AJAX实现省市县三级联动效果
Oct 16 #Javascript
简单聊聊Vue中的计算属性和属性侦听
Oct 05 #Vue.js
JS中如何优雅的使用async await详解
Oct 05 #Javascript
js中Object.create实例用法详解
Oct 05 #Javascript
TypeScript中条件类型精读与实践记录
Oct 05 #Javascript
SSM VUE Axios详解
Ajax实现三级联动效果
Oct 05 #Javascript
You might like
晶体管单管来复再生式收音机
2021/03/02 无线电
php中数据的批量导入(csv文件)
2006/10/09 PHP
提高PHP编程效率的53个要点(经验小结)
2010/09/04 PHP
基于ubuntu下nginx+php+mysql安装配置的具体操作步骤
2013/04/28 PHP
PHP判断来访是搜索引擎蜘蛛还是普通用户的代码小结
2015/09/14 PHP
常见的5个PHP编码小陋习以及优化实例讲解
2021/02/27 PHP
javascript中对对层的控制
2006/12/29 Javascript
javascript学习笔记(十四) window对象使用介绍
2012/06/20 Javascript
javascript表单验证 - Parsley.js使用和配置
2013/01/25 Javascript
js判断IE浏览器版本过低示例代码
2013/11/22 Javascript
Javascript基础教程之数据类型 (布尔型 Boolean)
2015/01/18 Javascript
归纳下js面向对象的几种常见写法总结
2016/08/24 Javascript
JavaScript中Number对象的toFixed() 方法详解
2016/09/02 Javascript
HTML5 实现的一个俄罗斯方块实例代码
2016/09/19 Javascript
js 实现获取name 相同的页面元素并循环遍历的方法
2017/02/14 Javascript
Vue + Webpack + Vue-loader学习教程之功能介绍篇
2017/03/14 Javascript
浅析js中mvvm模式实现的原理
2018/10/06 Javascript
vue-cli —— 如何局部修改Element样式
2020/10/22 Javascript
[00:32]2018DOTA2亚洲邀请赛VG出场
2018/04/03 DOTA
Python数组条件过滤filter函数使用示例
2014/07/22 Python
python实现查询IP地址所在地
2015/03/29 Python
Python中使用items()方法返回字典元素对的教程
2015/05/21 Python
详解Python读取配置文件模块ConfigParser
2017/05/11 Python
Python定时发送消息的脚本:每天跟你女朋友说晚安
2018/10/21 Python
Python3爬虫学习入门教程
2018/12/11 Python
css3中flex布局宽度不生效的解决
2020/12/09 HTML / CSS
美国名牌手表折扣网站:Jomashop
2020/05/22 全球购物
哈曼俄罗斯官方网上商店:Harman.club
2020/07/24 全球购物
中学生评语大全
2014/04/18 职场文书
考察现实表现材料
2014/05/19 职场文书
中国梦读书活动总结
2014/07/10 职场文书
社区党建工作汇报材料
2014/08/14 职场文书
个人投资合作协议书
2014/10/12 职场文书
2015幼儿园庆元旦活动方案
2014/12/09 职场文书
实习班主任自我评价
2015/03/11 职场文书
暗恋桃花源观后感
2015/06/12 职场文书