在项目中,常常会用到ajax,好比实现局部刷新,好比须要先后端交互等,这里呢分享局部刷新的两种方法,主要用的是ajax里面的.load(),其余高级方法的使用之后再作详细笔记。html
第一种:html5
当某几个页面都有相同的头部、导航、底部的时候,点击导航连接能够在几个页面中切换,此时想要的效果是点击连接后只切换内容部分,其余再也不从新加载。上代码。jquery
jq-load.html:ajax
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-load2.html、jq-load3.html与jq-load.html代码基本一致,只在#container的div里展现的内容不同。后端
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 });
注:此种方法用到了一些html5里面的新标记,在js中建立它们再也不赘述。post
第二种:this
若是网页的左侧有一个列表,点击列表使右侧的内容进行切换,若是右侧的内容过多,不适合作选项卡,这时候用.load()局部刷新最好不过了。上代码。url
user.html:spa
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); });
user_center.html:
<div> 用户中心 …… </div>
注:其余user_xxx.html的页面也是列表相对应的内容,此处再也不赘述。
总结:
以上两种方法原理是同样的,经过.load()从新加载页面中的某一部分,需注意,ajax须要在服务器环境下运行。经过对比,可发现第一种比较简单,第二种稍复杂些,不过我的推荐第二种,第一种主要是举个例子,看.load()是怎么来用的,其实它在用户体验方面稍逊一筹,好比点击的时候地址栏里地址不变,使前进、后退失效,这个能够到后面再实现。而第二种的话运用比较灵活,巧妙的借助data-*的自定义属性来存储数据,点击的时候修改锚点,由于地址有变,因此刷新的时候仍然会保持当前的页面内容而不是切换到第一个。
若是有什么问题,还请园子里的朋友多多指教。多谢。