AJAX实现指定部分页面刷新效果
更新时间：2021年10月14日 16:12:53 作者：不争亦不屑
这篇文章主要为大家详细介绍了AJAX实现指定部分页面刷新效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
（福利推荐：【腾讯云】服务器最新限时优惠活动，云服务器1核2G仅99元/年、2核4G仅768元/3年，立即抢购>>>：9i0i.cn/qcloud）
（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）
本文实例为大家分享了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="http://9i0i.com/pic.php?p=../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="http://9i0i.com/pic.php?p=../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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持程序员之家。
相关文章
AJAX中的请求方式以及同步异步的区别小结，学习ajax处理请求的朋友可以参考下。2010-08-08
使用Ajax生成流文件下载的功能，可以使用隐藏form的方式。需要的朋友可以参考下2013-07-07
这篇文章主要介绍了基于Ajax技术实现考试倒计时并自动提交试卷 的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-06-06
将以下文本放入一个HTML页面即可看到效果,将会有两次弹出提示,最后在页面上显示YES,表示完成2012-01-01
这篇文章主要介绍了Jquery Ajax不执行success回调函数的原因及解决方法2014-04-04
这篇文章主要为大家详细介绍了Ajax实现页面无刷新留言效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-12-12
在web开发的时候经常需要用到ajax，但是有些问题往往会被忽略，如果提交后需要在服务端做一些后台操作的话因为浏览器默认状态下有缓存的原因，可能页面上的信息还是正确的，但是后台的逻辑代码却没有真正的更新。2010-02-02
一个简单的AJAX请求类...2006-12-12
这篇文章主要介绍了使用AJAX完成用户名是否存在异步校验的相关资料,需要的朋友可以参考下2016-12-12
下面小编就为大家带来一篇ajax内部值外部调用不了的原因及解决方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-06-06
最新评论