ajax實現簡單的點擊左側菜單，右側加載不一樣網頁

時間 2019-11-11

原文原文鏈接

實現：ajax實現點擊左側菜單，右側加載不一樣網頁（在整個頁面無刷新的狀況下實現右側局部刷新，用到ajax注意須要在服務器環境下運行，從HBuilder自帶的服務器中打開瀏覽效果便可）javascript

原理：ajax的局部刷新原理：經過.load()從新加載頁面中的某一部分，巧妙的藉助data-*的自定義屬性來存儲數據，點擊的時候修改錨點，由於地址有變，因此刷新的時候仍然會保持當前的頁面內容而不是切換到第一個。css

遇到ajax局部刷新的需求也有不少，有時候比較簡單，當內容較少，適合作成選項卡，若是網頁的左側有一個列表，點擊列表使右側的內容進行切換，若是右側的內容過多，不適合作選項卡，這時候用.load()局部刷新最好不過了，在項目中常常使用到流程管理後臺，即是左右結構佈局，這個時候，簡單的demo示例以下html

<!DOCTYPE html>
<html lang="en">

    <head>
        <title>ajax局部刷新</title>
        <style> .userMenu { float: left; width: 200px; } #content { float: left; } </style>
        <meta charset="utf-8">
        <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>

    </head>

    <body>
        <div 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>
            <div id="content"></div>
        </div>
    </body>
    <script> $(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); }); </script>

</html>

建立右側對應的幾個新的html頁面user_center.html，user_account.html，user_trade.html，user_info.html前端

user_center.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div>
  用戶中心
  用戶中心
  用戶中心
  
</div>
    </body>
</html>

user_account.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div>
  帳戶信息
  帳戶信息
  帳戶信息
 
</div>
    </body>
</html>

user_trade.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div>
  交易中心
  交易中心
  交易中心
</div>
    </body>
</html>

user_info.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div>
 消息中心
 消息中心
 消息中心

</div>
    </body>
</html>