jQuery+与ajax怎么实现局部刷新功能

来源：匠吉游戏

这次给大家带来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网其它相关文章！