本文实例为大家分享了AJAX实现指定部分页面刷新效果的具体代码，供大家参考，具体内容如下
这个例子使用了bootstrap，jQuery和NProgress进度条插件，事先需引入相关文件。
需求：点击左边的选项，不需要整个页面刷新，只进行右边页面的刷新。
这里需要三个文件
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\” >
<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=\”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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持悠久资源网。
您可能感兴趣的文章:
- jQuery实现AJAX定时刷新局部页面实例
- JS+Ajax+Jquery实现页面无刷新分页以及分组 超强的实现
- 基于Jquery 解决Ajax请求的页面 浏览器后退前进功能，页面刷新功能实效问题
- Ajax实现页面自动刷新实例解析
- django+js+ajax实现刷新页面的方法
- Ajax回退刷新页面问题的解决办法
- ajax页面无刷新 IE下遭遇Ajax缓存导致数据不更新的问题
- 使用ajax实现无刷新改变页面内容和地址栏URL
- Ajax+php数据交互并且局部刷新页面的实现详解
- 浅谈Ajax技术实现页面无刷新
