菜单页面跳转

---恢复内容开始---

今天都5月18号了，时间好紧张。终于把我的跳转页面改出点眉目了在这里整理一下。

点击菜单，利用ajax将页面（menu表中存放着页面的地址）传入主页面（index.jsp）中的指定位置。

1.数据库Menu表中存放了path（即每个菜单选项所对应的地址）

2.jsp页面中在菜单el表达式部分接收了menu的集合，取出path

<!-- 左侧导航菜单 -->
                <!-- #sidebar-shortcuts -->
                <%-- <jsp:include page="menu.jsp"/> --%>
                <ul class="nav nav-list">
                    <c:forEach items="${menuList}" var="_list">
                        <c:if test="${_list.parentId==0}">
                            <li>
                            <a href="#" class="dropdown-toggle"> 
                                <i class="icon-list"></i> 
                                <span class="menu-text" hr='${_list.path}'>${_list.menuName} </span> 
                                <b class="arrow icon-angle-down"></b> 
                                </a>
                                <ul class="submenu">
                                    <c:forEach items="${menuList}" var="_listchild">
                                        <c:if test="${_listchild.parentId==_list.menuId}">
                                            <li><a hr="<%=basePath%>${_listchild.path}" class="childMenu" 
                                                data-title="${_listchild.menuName}"
                                                href="javasript:void()">${_listchild.menuName}</a></li>
                                        </c:if>
                                    </c:forEach>
                                </ul></li>
                        </c:if>
                    </c:forEach>
                </ul>
                <!--左侧导航栏结束。。。。。。。-->

定义了两个hr表签（黄色部分），在前台接收后台传回的集合地址。

3.index.jsp页面里包含的AJAX

<script src="assets/js/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
    $(function() {

        $('.menu-text').click(function() {
            var url = $(this).attr("hr");
　　　　　　　　//alert(url);
            alert("menu-text:"+url);
            loadUri(url);
        })
        
        $('.childMenu').click(function(){
            var url = $(this).attr("hr");
            alert("childMenu:"+url);
            loadUri(url);
        })

    });
    function loadUri(url) {
        //通过ajax获取一段html
        $.ajax({
            url : url,
            cache : false,
            type : 'post',
            data : {},
            dataType : 'html',
            error : function() {
                alert('请求出错 了')
            },
            success : function(data) {
                alert(data);
                $('.main-content').html(data);

            }

        });

        //将html放到  .page-content div 里面

    }
</script>

黄色部分是获取到list的path，然后调用下面的ajax方法将获取到的页面传入到ajax中的指定位置。

 

 

---恢复内容结束---