ajax切换不同页面教程

发布于，归属于ajax与jquery。 只剩下板凳啦！ 共有431人围观    

当用户点击菜单项时，会向后台发送页码，后台根据页码来返回不同页面。同时使用了jquery.history插件，来解决ajax无法后退记录历史的问题。

来看构建过程

首先先建立如下菜单html结构

  1. <ul> 
  2.     <li><a href="#page1" rel="ajax">Home</a></li>   
  3.     <li><a href="#page2" rel="ajax">Portfolio</a></li>   
  4.     <li><a href="#page3" rel="ajax">About</a></li> 
  5.     <li><a href="#page4" rel="ajax">Contact</a></li> 
  6. </ul> 
  7.  
  8. <div class="loading"></div> 
  9.  
  10. <div id="content"> 
  11. <!-- Ajax Content --> 
  12. </div>

说明下：.loading为预加载动画容器，而#content为装返回的页面html的容器。

构建css样式

  1. .loading {  
  2.     background: url(images/load.gif) no-repeat;  
  3.     display:none;  
  4. }  
  5.               
  6. #content {  
  7.     font-family:arial;  
  8.     font-size:11px;  
  9.     display:none;  
  10. }

（实例包里面的css中有个错误，不是#loading 而是.loading，使用时请留意。）

来看Javascript代码

  1. $(document).ready(function () {
  2.    
  3.     //检查url是否包含页码信息
  4.     $.history.init(pageload);   
  5.        
  6.     //高亮显示选中的菜单
  7.     $('a[href=' + document.location.hash + ']').addClass('selected');
  8.    
  9.     //给a绑定单击事件
  10.     $('a[rel=ajax]').click(function () {
  11.        
  12.         //获取其href属性值
  13.         var hash = this.href;
  14.        
  15.         //删除#标示符
  16.         hash = hash.replace(/^.*#/, '');
  17.        
  18.         //读取该页码记录
  19.          $.history.load(hash);   
  20.         
  21.          //清理所有a的被选中的样式，给当前对象加被选中的样式
  22.          $('a[rel=ajax]').removeClass('selected');
  23.          $(this).addClass('selected');
  24.         
  25.          //隐藏内容层，显示预加载动画
  26.          $('#content').hide();
  27.          $('#loading').show();
  28.         
  29.          //运行ajax
  30.         getPage();
  31.    
  32.         //取消a的默认动作
  33.         return false;
  34.     });   
  35. });
  36.    
  37.  
  38. function pageload(hash) {
  39.     //如果存在历史记录，读取相应页面
  40.     if (hash) getPage();   
  41. }
  42.        
  43. function getPage() {
  44.    
  45.     //参数
  46.     var data = 'page=' + encodeURIComponent(document.location.hash);
  47.     $.ajax({
  48.         url: "loader.php",   
  49.         type: "GET",       
  50.         data: data,       
  51.         cache: false,
  52.         success: function (html) {   
  53.        
  54.             //隐藏预加载动画
  55.             $('#loading').hide();   
  56.            
  57.             //加入内容
  58.             $('#content').html(html);
  59.            
  60.             //显示内容层
  61.             $('#content').fadeIn('slow');       
  62.         }       
  63.     });
  64. }

我已经换成中文注释，这里就不再解释。

（如果您喜欢这篇教程，可以通过支付宝打赏我们1元哦，拜谢！）

跟作者说两句

:wink: :twisted: :roll: :oops: :mrgreen: :lol: :idea: :evil: :cry: :arrow: :?: :-| :-x :-o :-P :-? :) :( :!: 8-O 8)

只剩下板凳了！

  1. paomian567

    我看过这个教程了，挺好的，现在就是把page写在不同的文件里，也就是从不同的页面去调取，应该怎么做

同类