jQuery+ajax实现局部刷新
以上两种方法原理是一样的，通过.load()重新加载页面中的某一部分，需注意，ajax需要在服务器环境下运行。通过对比，可发现第一种比较简单，第二种稍复杂些，不过个人推荐第二种，第一种主要是举个例子，看.load()是怎么来用的，其实它在用户体验方面稍逊一筹，比如点击的时候地址栏里地址不变，使前进、后退失效，这个可以到后面再实现。而第二种的话运用比较灵活，巧妙的借助data-*的自定义属性来存储数据，点击的时候修改锚点，因为地址有变，所以刷新的时候仍然会保持当前的页面内容而不是切换到第一个，希望对大家有帮助，如果有更好的方法，请多指教。
jq-load.html：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>ajax局部刷新</title> 5 </head> 6 <body> 7 8 <header> 9 <nav> 10 <a href="jq-load.html" class="current">首页</a> 11 <a href="jq-load2.html">新闻资讯</a> 12 <a href="jq-load3.html">用户中心</a> 13 </nav> 14 </header> 15 16 <section id="content"> 17 <div id="container"> 18 首页的内容 19 </div> 20 </section> 21 22 <script src="js/jquery-1.11.0.min.js"></script> 23 <script src="js/jq-load.js"></script> 24 25 </body> 26 </html>
jq-load.js：
1 $(\'nav a\').on(\'click\', function(e) {
2 e.preventDefault(); // 阻止链接跳转
3 var url = this.href; // 保存点击的地址
4
5 $(\'nav a.current\').removeClass(\'current\');
6 $(this).addClass(\'current\');
7
8 $(\'#container\').remove();
9 $(\'#content\').load(url + \' #container\').fadeIn(\'slow\'); // 加载新内容,url地址与该地址下的选择器之间要有空格,表示该url下的#container
10 });
第二种：
如果网页的左侧有一个列表，点击列表使右侧的内容进行切换，如果右侧的内容过多，不适合做选项卡，这时候用.load()局部刷新最好不过了。上代码。
user.html：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <title>个人中心</title> 5 <meta charset="utf-8"> 6 <script src="js/jquery-1.11.0.min.js"></script> 7 <script src="js/user.js"></script> 8 </head> 9 <body> 10 11 <div class="userWrap"> 17 <ul class="userMenu"> 18 <li class="current" data-id="center">用户中心</li> 19 <li data-id="account">账户信息</li> 20 <li data-id="trade">交易记录</li> 21 <li data-id="info">消息中心</li> 22 </ul> 23 <div id="content"></div> 25 </div> 26 27 </body> 28 </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);
});
版权声明：本文为li-123原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。