jQuery+与ajax怎么实现局部刷新功能
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了jQuery+与ajax怎么实现局部刷新功能，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3357字，纯文字阅读大概需要5分钟。
内容图文
这次给大家带来jQuery+与ajax怎么实现局部刷新功能，jQuery+与ajax实现局部刷新功能的注意事项有哪些，下面就是实战案例，一起来看一下。当某几个页面都有相同的头部、导航、底部的时候，点击导航链接可以在几个页面中切换，此时想要的效果是点击链接后只切换内容部分，其他不再重新加载。上代码。
jq-load.html：
<!DOCTYPE html>
<html>
<head>
<title>ajax局部刷新</title>
</head>
<body>
<header>
<nav>
<a href="jq-load.html" rel="external nofollow" class="current">首页</a>
<a href="jq-load2.html" rel="external nofollow" >新闻资讯</a>
<a href="jq-load3.html" rel="external nofollow" >用户中心</a>
</nav>
</header>
<section id="content">
<p id="container">
首页的内容
</p>
</section>
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/jq-load.js"></script>
</body>
</html>注：jq-load2.html、jq-load3.html与jq-load.html代码基本一致，只在#container的p里展示的内容不一样。
jq-load.js：
$('nav a').on('click', function(e) {
e.preventDefault(); // 阻止链接跳转
var url = this.href; // 保存点击的地址
$('nav a.current').removeClass('current');
$(this).addClass('current');
$('#container').remove();
$('#content').load(url + ' #container').fadeIn('slow'); // 加载新内容,url地址与该地址下的选择器之间要有空格,表示该url下的#container
});注：此种方法用到了一些html5里面的新标记，在js中创建它们不再赘述。
第二种：
如果网页的左侧有一个列表，点击列表使右侧的内容进行切换，如果右侧的内容过多，不适合做选项卡，这时候用.load()局部刷新最好不过了。上代码。
user.html：
<!DOCTYPE html>
<html lang="en">
<head>
<title>个人中心</title>
<meta charset="utf-8">
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/user.js"></script>
</head>
<body>
<p class="userWrap">
<ul class="userMenu">
<li class="current" data-id="center">用户中心</li>
<li data-id="account">账户信息</li>
<li data-id="trade">交易记录</li>
<li data-id="info">消息中心</li>
</ul>
<p id="content"></p>
</p>
</body>
</html>user.js：
$(function(){
$(".userMenu").on("click", "li", function(){
var sId = $(this).data("id"); //获取data-id的值
window.location.hash = sId; //设置锚点
loadInner(sId);
});
function loadInner(sId){
var sId = window.location.hash;
var pathn, i;
switch(sId){
case "#center": pathn = "user_center.html"; i = 0; break;
case "#account": pathn = "user_account.html"; i = 1; break;
case "#trade": pathn = "user_trade.html"; i = 2; break;
case "#info": pathn = "user_info.html"; i = 3; break;
default: pathn = "user_center.html"; i = 0; break;
}
$("#content").load(pathn); //加载相对应的内容
$(".userMenu li").eq(i).addClass("current").siblings().removeClass("current"); //当前列表高亮
}
var sId = window.location.hash;
loadInner(sId);
});user_center.html：
<p> 用户中心 …… </p>
注：其他user_xxx.html的页面也是列表相对应的内容，此处不再赘述。
总结：
以上两种方法原理是一样的，通过.load()重新加载页面中的某一部分，需注意，ajax需要在服务器环境下运行。通过对比，可发现第一种比较简单，第二种稍复杂些，不过个人推荐第二种，第一种主要是举个例子，看.load()是怎么来用的，其实它在用户体验方面稍逊一筹，比如点击的时候地址栏里地址不变，使前进、后退失效，这个可以到后面再实现。而第二种的话运用比较灵活，巧妙的借助data-*的自定义属性来存储数据，点击的时候修改锚点，因为地址有变，所以刷新的时候仍然会保持当前的页面内容而不是切换到第一个。
相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！
推荐阅读：
Ajax用户认证与注册使用详解
ajax加载超时提示怎样实现
Ajax请求时显示进度
以上就是jQuery+与ajax怎么实现局部刷新功能的详细内容，更多请关注Gxl网其它相关文章！
内容总结
以上是互联网集市为您收集整理的jQuery+与ajax怎么实现局部刷新功能全部内容，希望文章能够帮你解决jQuery+与ajax怎么实现局部刷新功能所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。