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 相关文章推荐
在网页中使用document.write时遭遇的奇怪问题
Aug 24 Javascript
在Node.js应用中使用Redis的方法简介
Jun 24 Javascript
JavaScript原型及原型链终极详解
Jan 04 Javascript
JavaScript知识点总结(五)之Javascript中两个等于号(==)和三个等于号(===)的区别
May 31 Javascript
vue-router路由简单案例介绍
Feb 21 Javascript
解决BootStrap Fileinput手机图片上传显示旋转问题
Jun 01 Javascript
Vue中&quot;This dependency was not found&quot;问题的解决方法
Jun 19 Javascript
不得不知的ES6小技巧
Jul 28 Javascript
微信小程序在地图选择地址并返回经纬度简单示例
Dec 03 Javascript
vue.js实现的幻灯片功能示例
Jan 18 Javascript
详解vue移动端项目代码拆分记录
Mar 15 Javascript
微信小程序自定义底部弹出框功能
Nov 18 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
Zerg建筑一览
2020/03/14 星际争霸
PHP日期时间函数的高级应用技巧
2009/05/16 PHP
php使用正则过滤js脚本代码实例
2014/05/10 PHP
php 使用array函数实现分页
2015/02/13 PHP
php银联网页支付实现方法
2015/03/04 PHP
php制作基于xml的RSS订阅源功能示例
2017/02/08 PHP
PHP用continue跳过本次循环中剩余代码的注意点
2017/06/27 PHP
return false,对阻止事件默认动作的一些测试代码
2010/11/17 Javascript
基于AngularJs + Bootstrap + AngularStrap相结合实现省市区联动代码
2016/05/30 Javascript
AngularJS  $on、$emit和$broadcast的使用
2016/09/05 Javascript
Bootstrap如何创建表单
2016/10/21 Javascript
解决微信小程序中的滚动穿透问题
2019/09/16 Javascript
JS实现简易留言板特效
2019/12/23 Javascript
[05:56]第十六期——新进3大C之小兔基
2014/06/24 DOTA
Python常用的日期时间处理方法示例
2015/02/08 Python
python持久性管理pickle模块详细介绍
2015/02/18 Python
python通过装饰器检查函数参数数据类型的方法
2015/03/13 Python
使用Python下载歌词并嵌入歌曲文件中的实现代码
2015/11/13 Python
基于Python Shell获取hostname和fqdn释疑
2016/01/25 Python
python 文件操作api(文件操作函数)
2016/08/28 Python
python数据结构之列表和元组的详解
2017/09/23 Python
python方向键控制上下左右代码
2018/01/20 Python
Python爬虫获取图片并下载保存至本地的实例
2018/06/01 Python
对python for 文件指定行读写操作详解
2018/12/29 Python
简单了解Django ContentType内置组件
2019/07/23 Python
Python OpenCV调用摄像头检测人脸并截图
2020/08/20 Python
python3发送邮件需要经过代理服务器的示例代码
2019/07/25 Python
关于阿里云oss获取sts凭证 app直传 python的实例
2019/08/20 Python
Python lxml库的简单介绍及基本使用讲解
2020/12/22 Python
HTML5中使用postMessage实现Ajax跨域请求的方法
2016/04/19 HTML / CSS
年度考核自我鉴定
2013/11/09 职场文书
国贸专业个人求职信分享
2013/12/04 职场文书
高二物理教学反思
2014/02/08 职场文书
岗位廉政承诺书
2014/03/27 职场文书
行政执法队伍作风整顿个人剖析材料
2014/10/11 职场文书
2014年变电站工作总结
2014/12/19 职场文书