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对象和DOM对象相互转化
Apr 24 Javascript
ExtJS 2.0实用简明教程 之Border区域布局
Apr 29 Javascript
extJs 常用到的增,删,改,查操作代码
Dec 28 Javascript
JS中动态添加事件(绑定事件)的代码
Jan 09 Javascript
javascript+xml实现简单图片轮换(只支持IE)
Dec 23 Javascript
让jQuery与其他JavaScript库并存避免冲突的方法
Dec 23 Javascript
js原型继承的两种方法对比介绍
Mar 30 Javascript
JavaScript插件化开发教程 (四)
Jan 27 Javascript
JavaScript的Number对象的toString()方法
Dec 18 Javascript
vue+ElementUI实现订单页动态添加产品数据效果实例代码
Jul 13 Javascript
Cpage.js给组件绑定事件的实现代码
Aug 31 Javascript
javascript Canvas动态粒子连线
Jan 01 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数据饼图效果实现代码
2011/11/23 PHP
PHP采用get获取url汉字出现乱码的解决方法
2014/11/13 PHP
PHP函数func_num_args用法实例分析
2015/12/07 PHP
Bootstrap+PHP实现多图上传功能实例详解
2018/04/08 PHP
PHP dirname(__FILE__)原理及用法解析
2020/10/28 PHP
Jquery操作下拉框(DropDownList)实现取值赋值
2013/08/13 Javascript
js数组的基本用法及数组根据下标(数值或字符)移除元素
2013/10/20 Javascript
jquery统计输入文字的个数并对其进行判断
2014/01/07 Javascript
node.js中的console.dir方法使用说明
2014/12/10 Javascript
JavaScript实现数字数组按照倒序排列的方法
2015/04/06 Javascript
jQuery原型属性和原型方法详解
2015/07/07 Javascript
Node.js中JavaScript操作MySQL的常用方法整理
2016/03/01 Javascript
js获取当前日期时间及其它日期操作汇总
2016/03/08 Javascript
基于jQuery ligerUI实现分页样式
2016/09/18 Javascript
Node.js与MySQL交互操作及其注意事项
2016/10/05 Javascript
js实现自动轮换选项卡
2017/01/13 Javascript
three.js绘制地球、飞机与轨迹的效果示例
2017/02/28 Javascript
SeaJS中use函数用法实例分析
2017/10/10 Javascript
vue进行图片的预加载watch用法实例讲解
2018/02/07 Javascript
如何为你的JS项目添加智能提示与类型检查详解
2019/03/12 Javascript
详解Vue源码学习之双向绑定
2019/04/10 Javascript
微信小程序 checkbox使用实例解析
2019/09/09 Javascript
Vue.js下拉菜单组件使用方法详解
2019/10/19 Javascript
vue实现从外部修改组件内部的变量的值
2020/07/30 Javascript
利用matplotlib+numpy绘制多种绘图的方法实例
2017/05/03 Python
Python实现简单的获取图片爬虫功能示例
2017/07/12 Python
分数霸榜! python助你微信跳一跳拿高分
2018/01/08 Python
解决python flask中config配置管理的问题
2019/07/26 Python
Python系统公网私网流量监控实现流程
2020/11/23 Python
加拿大百叶窗和窗帘定制网站:Blinds
2017/01/30 全球购物
JD Sports法国:英国篮球和运动时尚的领导者
2017/09/28 全球购物
三八节主持词
2014/03/17 职场文书
外贸会计专业自荐信
2014/06/22 职场文书
"9.18"国耻日演讲稿范文
2014/09/14 职场文书
淘宝好评语句大全
2014/12/31 职场文书
在HTML5 localStorage中存储对象的示例代码
2021/04/21 Javascript