Ajax+div頁面佈局效果

這次帶給大家Ajax+div頁面佈局效果，Ajax+div頁面佈局的注意事項有哪些，下面就是實戰案例，一起來看一下。

效果示範：

①預設頁面（index.jsp）：

#②：點選左側使用者管理 標籤下的使用者清單選項後，右邊預設頁面內容更新為使用者清單頁面（userList.jsp）的內容：

③：同理，點選產品管理、訂單管理標籤下的產品清單、訂單清單時，右側內容會對應的刷新為產品清單頁（productList.jsp）、訂單清單頁（recordList.jsp）的內容

這樣就使用Ajax +p實現了左邊選單選擇，右邊內容顯示的效果，下面就來看看具體的實作過程吧

#一：

整個示範用的範例程式包含預設頁面（index.jsp），使用者清單頁（userList.jsp），產品清單頁（productList.jsp），訂單管理頁面（recordList.jsp）

使用了Bootstrap 框架和FontAwesome 的圖示（沒辦法，bootstrap自帶的圖示太少了o(╯□╰)o），這兩個貨的使用方法請參考官網，都比較簡單

先來看看index.jsp的程式碼吧，我基本上都詳細註解了：

nbsp;html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

  
    <meta>
    <meta>  
    <meta>  
    <meta>
    <!-- 引入各种CSS样式表 -->
    <link>
    <link>
    <link>  <!-- 修改自Bootstrap官方Demon，你可以按自己的喜好制定CSS样式 -->
    <link>  <!-- 将默认字体从宋体换成微软雅黑（个人比较喜欢微软雅黑，移动端和桌面端显示效果比较接近） -->    
    <script></script>
    <script></script>
    <title>- 后台管理系统 -</title>
  
  
  <!-- 顶部菜单（来自bootstrap官方Demon）==================================== -->
    <nav>
       <p>
        </p>
<p>
          <button>
            <span>Toggle navigation</span>
            <span></span>
            <span></span>
            <span></span>
          </button>
           <a>XXXX.com</a>
        </p>
        <p>
          </p>
<ul>            
            <li><a><i></i> 用户列表</a></li>  
            <li><a><i></i> 产品列表</a></li>
            <li><a><i></i> 订单列表</a></li>  
          </ul>
        
       
    </nav>
  <!-- 左侧菜单选项========================================= -->
    <p>
      </p><p>
        </p><p>    
          </p>

                         
•                 用户管理 (current)             
                                        
              
•  用户列表
            
            
•                 产品管理 (current)             
              
              
•  产品列表
            
            
•                 订单管理 (current)             
              
              
•  订单列表
            
          

                                     

          

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

                          

                

                             使用指南：
                  

默认页面内容……                 

                                               <script> /* * 对选中的标签激活active状态，对先前处于active状态但之后未被选中的标签取消active * （实现左侧菜单中的标签点击后变色的效果） */ $(document).ready(function () { $(&#39;ul.nav > li&#39;).click(function (e) { //e.preventDefault(); 加上这句则导航的<a>标签会失效 $(&#39;ul.nav > li&#39;).removeClass(&#39;active&#39;); $(this).addClass(&#39;active&#39;); }); }); /* * 解决ajax返回的页面中含有javascript的办法： * 把xmlHttp.responseText中的脚本都抽取出来，不管AJAX加载的HTML包含多少个脚本块，我们对找出来的脚本块都调用eval方法执行它即可 */ function executeScript(html) { var reg = /<script[^>]*>([^\x00]+)$/i; //对整段HTML片段按<\/script>拆分 var htmlBlock = html.split("<\/script>"); for (var i in htmlBlock) { var blocks;//匹配正则表达式的内容数组，blocks[1]就是真正的一段脚本内容，因为前面reg定义我们用了括号进行了捕获分组 if (blocks = htmlBlock[i].match(reg)) { //清除可能存在的注释标记，对于注释结尾-->可以忽略处理，eval一样能正常工作 var code = blocks[1].replace(/<!--/, &#39;&#39;); try { eval(code) //执行脚本 } catch (e) { } } } } /* * 利用p实现左边点击右边显示的效果（以id="content"的p进行内容展示） * 注意： * ①：js获取网页的地址，是根据当前网页来相对获取的，不会识别根目录； * ②：如果右边加载的内容显示页里面有css，必须放在主页（即例中的index.jsp）才起作用 * （如果单纯的两个页面之间include，子页面的css和js在子页面是可以执行的。 主页面也可以调用子页面的js。但这时要考虑页面中js和渲染的先后顺序 ） */ function showAtRight(url) { var xmlHttp; if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari xmlHttp=new XMLHttpRequest(); //创建 XMLHttpRequest对象 } else { // code for IE6, IE5 xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlHttp.onreadystatechange=function() { //onreadystatechange — 当readystate变化时调用后面的方法 if (xmlHttp.readyState == 4) { //xmlHttp.readyState == 4 —— finished downloading response if (xmlHttp.status == 200) { //xmlHttp.status == 200 —— 服务器反馈正常 document.getElementById("content").innerHTML=xmlHttp.responseText; //重设页面中id="content"的p里的内容 executeScript(xmlHttp.responseText); //执行从服务器返回的页面内容里包含的JavaScript函数 } //错误状态处理 else if (xmlHttp.status == 404){ alert("出错了☹ （错误代码：404 Not Found），……！"); /* 对404的处理 */ return; } else if (xmlHttp.status == 403) { alert("出错了☹ （错误代码：403 Forbidden），……"); /* 对403的处理 */ return; } else { alert("出错了☹ （错误代码：" + request.status + "），……"); /* 对出现了其他错误代码所示错误的处理 */ return; } } } //把请求发送到服务器上的指定文件（url指向的文件）进行处理 xmlHttp.open("GET", url, true); //true表示异步处理 xmlHttp.send(); } </script>   

注意：

#如果FontAwesomt的圖示沒有正確顯示出來，那麼很可能是font-awesome .css 內的字型檔案位址出錯

注意檢查右邊紅框內的url是否對應左邊紅框內fonts-awesome檔案的路徑

#二：

userList.jsp頁面代碼：

nbsp;html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">


<meta>
<title>Insert title here</title>


  <p>
    我是用户列表 (っ´Ι`)っ
  </p>

productList.jsp：

nbsp;html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">


<meta>
<title>Insert title here</title>


  <p>
    我是产品列表 ╰(￣▽￣)╭
  </p>

recordList.jsp：

nbsp;html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">


<meta>
<title>Insert title here</title>


  <p>
    我是订单列表 

</p>

這三個只是簡單的演示頁，就不多費筆墨了

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

ajax怎麼實現遠端通訊功能

#jQuery.ajaxWebService請求WebMethod處理Ajax

#

以上是Ajax+div頁面佈局效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！