ajax实现简单的点击左侧菜单，右侧加载不同网页

王小婷

发布于 2018-05-31 14:54:46

3.3K0

发布于 2018-05-31 14:54:46

文章被收录于专栏：编程微刊编程微刊编程微刊

实现：ajax实现点击左侧菜单，右侧加载不同网页（在整个页面无刷新的情况下实现右侧局部刷新，用到ajax注意需要在服务器环境下运行，从HBuilder自带的服务器中打开浏览效果即可）

图片.png

原理：ajax的局部刷新原理：通过.load()重新加载页面中的某一部分，巧妙的借助data-*的自定义属性来存储数据，点击的时候修改锚点，因为地址有变，所以刷新的时候仍然会保持当前的页面内容而不是切换到第一个。

遇到ajax局部刷新的需求也有很多，有时候比较简单，当内容较少，适合做成选项卡，如果网页的左侧有一个列表，点击列表使右侧的内容进行切换，如果右侧的内容过多，不适合做选项卡，这时候用.load()局部刷新最好不过了，在项目中经常使用到流程管理后台，便是左右结构布局，这个时候，简单的demo示例如下

<!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>

90后前端妹子，爱编程，爱运营，爱折腾。坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见，欢迎大家一起探讨交流。原文作者：祈澈姑娘原文链接：https://www.jianshu.com/u/05f416aefbe1

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2018.05.03 ，如有侵权请联系 cloudcommunity@tencent.com 删除

ajax

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

ajax

登录后参与评论

0 条评论

热度