基于Ajax+div的“左边菜单、右边内容”页面效果实现

效果演示：

①默认页面（index.jsp）：

 

②：点击左侧 用户管理 标签下的 用户列表 选项后，右边默认页面内容更新为用户列表页（userList.jsp）的内容 ：

 

③：同理，点击 产品管理、订单管理 标签下的 产品列表、订单列表 时，右侧内容会相应的刷新为产品列表页（productList.jsp）、订单列表页（recordList.jsp）的内容

这样就使用Ajax+div实现了左边菜单选择，右边内容显示的效果，下面就来看看具体的实现过程吧

 

一：

整个演示用的示例程序包含默认页面（index.jsp），用户列表页（userList.jsp），产品列表页（productList.jsp），订单管理页（recordList.jsp）

使用了 Bootstrap 框架和 FontAwesome 的图标（没办法，bootstrap自带的图标太少了o(╯□╰)o），这俩货的使用方法请参见官网，都比较简单

先来看看index.jsp的代码吧，我基本都详细注释了：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
     


   
       
           <%-- 在IE运行最新的渲染模式 --%>
           <%-- 初始化移动浏览显示 --%>
       
        
       
       
       
           
                    
        
       
       
    
       
   
    
   
   
       

             

               

                   
                        Toggle navigation
                       
                       
                       
                   
                      XXXX.com
               

                
               

                   

                        
                       
• 用户列表
    
                       
• 产品列表

                       
• 订单列表
    
                   

                      
               

             

       

   
       

           

               

        
                   

                       
                       
• 
                                用户管理 (current)
                         
 
                       
                       
                       

                           
• 用户列表

                       

                         
                       
• 
                                产品管理 (current)
                         
 
                       

                           
• 产品列表

                       

                        
                       
• 
                                订单管理 (current)
                         
 
                       

                           
• 订单列表

                       

                            
                   

                    
               

           

       

           
                 

                   

 控制台   欢迎使用XXX后台管理系统

                        
                       
                         

               
                               

                    
                                   使用指南：

                                   

默认页面内容……
                               

                                 
                              
                         

  
               

 
        
        
       
    
   

注意：

如果FontAwesomt的图标没有正确显示出来，那很可能是 font-awesome.css 内的字体文件地址出错

注意检查右边红框内的url是否对应左边红框内fonts-awesome文件的路径

 

二：

userList.jsp页面代码：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>







   

        我是用户列表 (っ´Ι`)っ
   

三：productList.jsp：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>







   

        我是产品列表 ╰(￣▽￣)╭
   

四：recordList.jsp：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>







   

        我是订单列表 <(￣ˇ￣)/
   

三：源码下载

http://files.cnblogs.com/files/Dreamer-1/AjaxExample.rar