案例：使用jquery的ajax load方法更新局部页面并应用NProgress库实现顶部进度条

首先下载bootstrap和nprogress两个库

index.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>主页面</title><link rel="stylesheet" href="bootstrap.css"><link rel="stylesheet" href="../nprogress.css"><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="cart.html">我的购物车</a><a class="list-group-item list-group-item-action" href="orders.html">我的订单</a></div></aside><main id="main" class="col-md-9"><h2>我的个人资料</h2><hr></main></div></div><script src="../jquery.js"></script><script>$(function ($) {$(document).ajaxStart(function () {NProgress.start()}).ajaxStop(function () {NProgress.done()})// 有一个独立的作用域，顺便确保页面加载完成执行
      $('.list-group-item').on('click', function () {var url = $(this).attr('href')$('#main').load(url + ' #main > *')return false})})</script>
</body>
</html>

cart.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>主页面</title><link rel="stylesheet" href="bootstrap.css">
</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="cart.html">我的购物车</a><a class="list-group-item list-group-item-action" href="orders.html">我的订单</a></div ></aside><main id="main" class="col-md-9"><h2>我的购物车</h2><hr></main></div></div>
</body>
</html>

orders.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>主页面</title><link rel="stylesheet" href="bootstrap.css">
</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="cart.html">我的购物车</a><a class="list-group-item list-group-item-action" href="orders.html">我的订单</a></div ></aside><main id="main" class="col-md-9"><h2>我的订单</h2><hr></main></div></div>
</body>
</html>

转载于:https://www.cnblogs.com/chuanzi/p/10516811.html

案例：使用jquery的ajax load方法更新局部页面并应用NProgress库实现顶部进度条相关推荐

2-jQuery - AJAX load() 方法【进阶篇】
第一篇的AJAX load() 方法过于简单,补充一下,完整的. 格式 $(selector).load(URL,data,callback); 源码 <!DOCTYPE html> &l ...
使用jQuery的ajax的方法完成一个手机归属地查询
使用jQuery的ajax的方法完成一个手机归属地查询 1.设计页面的效果: 2. 选用HTTP GET方法,将电话提交到服务端,并将返回的结果显示在界面相应的位置: 3. 服务端API地址:http ...
JQuery中ajax,get方法在asmx中的使用
喜大普奔,今天终于完成了一个月前就想完成的一个代码实现.就是在点击一个按钮后禁用按钮,弹出正在操作的提示框,执行完事件后再启用按钮. 以前的想法是Ajax和aspx联用,这样,省页面,也不用对后台代码 ...
HTML通过js的.load()方法加载页面头部和底部文件
前言: 大部分网站的头部和底部都是一样的,把公共头部和底部分离出来,使用时直接引用比重复写在每个页面好的多,对于后期的维护和二次开发,也比较友好.实现方法如下: <!DOCTYPE html&g ...
ajax load html页面,jQuery – AJAX load() 方法 | 菜鸟教程
为了避免多页面情形下的代码重复,可以利用 load() 方法,将重复的部分(例如导航栏)放入单独的文件,使用下列方法进行导入: //1.当前文件中要插入的地方使用此结构: //2.***.html中放 ...
1-jQuery - AJAX load() 方法【基础篇】
jQuery load() 方法是简单但强大的 AJAX 方法:load() 方法从服务器加载数据,并把返回的数据放入被选元素中. 格式 $(selector).load(URL 源码 index.h ...
jquery中的load()方法使用要点
今天做在线聊天网页,聊天可以配图,需要使用弹出层的方式浏览大图效果.总共三层,底层html主结构,中间半透明遮罩,顶层是缩略图放大后的大图.用户点击缩略图后在半透明遮罩上呈现大图. 因为在线聊天,图片 ...
ajax页面载入动画,添加加载动画，jQuery的AJAX .load（）
对于我知道必须采取超过几毫秒的时间的潜力,我用Spin.js它没有任何外部依赖,并且是跨浏览器兼容 var opts = { lines: 13, // The number of lines to ...
JQuery发起ajax请求，并在页面动态的添加元素
页面html代码: <li><div class="coll-tit"><span class="coll-icon">&l ...

案例：使用jquery的ajax load方法更新局部页面并应用NProgress库实现顶部进度条

案例：使用jquery的ajax load方法更新局部页面并应用NProgress库实现顶部进度条相关推荐

最新文章

热门文章