美文网首页
利用ajax实现管理后台系统单页(SPA)框架 无刷新页面内容切

利用ajax实现管理后台系统单页(SPA)框架 无刷新页面内容切

作者: QinHaolei | 来源:发表于2019-11-05 16:14 被阅读0次

Github地址

index.html
<!DOCTYPE html >
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width,height=device-height,user-scalable=no">
    <script src='https://code.jquery.com/jquery-3.3.1.min.js'></script>
</head>
<body>
    <!--left Menu-->
    <ul class="sidebar-menu">
           <li data-pagecode="workSummary" class="menu active">
                <span>菜单 ONE</span>
            </li>
            <li data-pagecode="workPlan" class='menu'>
                <span>菜单 Two</span>
            </li>
    </ul>
    
    <!--right content-->
    <div class="content-wrapper"> </div>
</body>
<script type="text/javascript">
// 获取其他html页面内容
var code = $(".sidebar-menu .active").attr("data-pagecode");
$.ajax({
    url: code + ".html",
    type:"get",
    data:{
        code:code
    },
    dataType:"html",
    success:function(data){
        $(".content-wrapper").html(data)
    }
});

// 点按菜单切换导航
    $(".sidebar-menu .menu").click(function(){
        // 菜单效果
        if($(this).hasClass("active")==false){
            $(this).addClass("active").siblings().removeClass("active");
            
            // 切换页面内容
            var code = $(this).attr("data-pagecode");
            if(code){
                $.ajax({
                    url:code + ".html",
                    type:"get",
                    dataType:"html",
                    success:function(data){
                        $(".content-wrapper").html(data);
                    }
                })
            }
        }
    });
 </script>
</html>    
workPlan.html
<h2>1 工作计划 1</h2>
workSummary.html
<h2>2 工作计划 2</h2>

相关文章

网友评论

      本文标题:利用ajax实现管理后台系统单页(SPA)框架 无刷新页面内容切

      本文链接:https://www.haomeiwen.com/subject/hqljbctx.html