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 相关文章推荐
在JavaScript中,为什么要尽可能使用局部变量?
Apr 06 Javascript
jquery validation插件表单验证的一个例子
Mar 03 Javascript
javascript 正则替换 replace(regExp, function)用法
May 22 Javascript
javascript中怎么做对象的类型判断
Nov 11 Javascript
js中文逗号转英文实现
Feb 11 Javascript
javascript进行四舍五入方法汇总
Dec 16 Javascript
JS动态添加iframe的代码
Sep 14 Javascript
谈一谈JS消息机制和事件机制的理解
Apr 14 Javascript
Vue组件通信的四种方式汇总
Feb 08 Javascript
js计算两个日期间的天数月的实例代码
Sep 20 Javascript
ES6 Promise对象的应用实例分析
Jun 27 Javascript
vue实现移动端省市区选择
Sep 27 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
php后门URL的防范
2013/11/12 PHP
详解HTTP Cookie状态管理机制
2016/01/14 PHP
Joomla调用系统自带编辑器的实现方法
2016/05/05 PHP
PHP批量删除jQuery操作
2017/07/23 PHP
可以把编码转换成 gb2312编码lib.UTF8toGB2312.js
2007/08/21 Javascript
firebug的一个有趣现象介绍
2011/11/30 Javascript
JS防止用户多次提交的简单代码
2013/08/01 Javascript
jQuery中bind,live,delegate与one方法的用法及区别解析
2013/12/30 Javascript
使用JQuery实现Ctrl+Enter提交表单的方法
2015/10/22 Javascript
详解 javascript中offsetleft属性的用法
2015/11/11 Javascript
浅析AngularJS中的指令
2016/03/20 Javascript
JS中如何比较两个Json对象是否相等实例代码
2016/07/13 Javascript
只需五句话搞定JavaScript作用域(经典)
2016/07/26 Javascript
jQuery Raty 一款不错的星级评分插件
2016/08/24 Javascript
bootstrap快速制作后台界面
2016/12/05 Javascript
jquery mobile移动端幻灯片滑动切换效果
2020/04/15 Javascript
JavaScript实现的冒泡排序法及统计相邻数交换次数示例
2017/04/26 Javascript
vue+vux实现移动端文件上传样式
2017/07/28 Javascript
node爬取新型冠状病毒的疫情实时动态
2020/02/06 Javascript
微信小程序实现翻牌抽奖动画
2020/09/21 Javascript
使用Python编写简单的端口扫描器的实例分享
2015/12/18 Python
Python 使用with上下文实现计时功能
2018/03/09 Python
浅谈Python Opencv中gamma变换的使用详解
2018/04/02 Python
Python 机器学习库 NumPy入门教程
2018/04/19 Python
Django 视图层(view)的使用
2018/11/09 Python
Python 占位符的使用方法详解
2019/07/10 Python
详解如何减少python内存的消耗
2019/08/09 Python
Python Tornado之跨域请求与Options请求方式
2020/03/28 Python
乌克兰在线商店的价格比较:Price.ua
2019/07/26 全球购物
模具专业毕业生自荐书范文
2014/02/19 职场文书
事业单位考核材料
2014/05/21 职场文书
教师师德师风个人整改方案
2014/09/18 职场文书
建筑横幅标语
2014/10/09 职场文书
领导班子作风建设剖析材料
2014/10/11 职场文书
Python 文本滚动播放器的实现代码
2021/04/25 Python
Redis做数据持久化的解决方案及底层原理
2021/07/15 Redis