struts2 webapp结构正确，菜单布局和iframe内容

Struts 2 webapp structured correctly with menu layout and iframe content?

本文关键字：布局 iframe 内容 菜单 webapp 结构 struts2      更新时间：2023-09-26

我继承了一个Struts 2/JSP web应用程序，有一些问题，我想知道它是否结构/分层正确与否。登录后，用户在主界面dashboard如下所示:

<s:form action="HomePage" name="formHomePage" method="post">
    <s:hidden name="selectedMenuItem" id="selectedMenuItem"/>
    <div id="layout">
        <!-- HEADER -->
        <div class="header" style="position:fixed; z-index:1;">
            ... Header bar ...
        </div>
        <!-- LEFT MENU -->
        <div class="left">
            <h3>Menu</h3>
                <li id="dashboard">Dashboard</li>
                <li id="projectList">Projects</li>f
                <li id="userList">Users</li>
            </ul>
        </div>
        <!-- MAIN CONTENT -->
        <div class="center">
            <iframe id="ifrmContent" name="contentFrame" src=""> </iframe>
       </div>
        <!-- FOOTER -->
        <div class="footer" style="position:fixed; z-index:1;">
            .... Footer bar ...
        </div>
    </div>
</s:form>

当用户单击菜单项时，执行以下(伪)代码:

$(..menuItem..).click(function(index,o) {
    $("#selectedMenuItem").val(menuItemID);
    // 'Submit' this main frame to load the content JSP through the action
    formHomePage.target="contentFrame";
    formHomePage.submit();
});

HomePage操作读取selectedMenuItem Struts变量，并返回struts.xml映射到正确JSP(如ProjectList.jsp或UserList.jsp)的结果。这个带有页眉/页脚/左菜单的HomePage总是留在浏览器中，只有iframe中的中间内容被用户想要的内容取代。我认为这是合理的，但我已经读过如何避免框架，如果可能的话。这个结构的一个问题出现在我写的另一个问题中:

使用struts2调试器中的动作名称/URL名称

另一个问题是，Chrome调试器不刷新JSP/javascript源文件时，用户单击一个菜单项。如果我放一个调试器;语句在$(window).load();，它将使用断点，但它显示一个随机的地方在原始的仪表板源文件，而不是文件/javascript，实际上正在执行。Chrome缓存被禁用，但调试器拒绝加载新的源文件

这就是Struts/jsp应该如何布局和结构吗?是否有比iframes更好的方法来加载页面的内容"部分"?我认为应该避免整页刷新以提高效率。为什么Chrome调试器不能正确处理这个?

不需要使用iframe来加载内容。如果您希望留在页面上并在结果div中更新其内容，则可以使用Ajax。

<div id="resultDiv" class="center">
    Initial content
</div>

脚本类似于

$(..menuItem..).click(function(index,o) {
    $("#selectedMenuItem").val(menuItemID);
    // 'Submit' this form to load the content to the resultDiv on this JSP through the action
    $.post($("form").attr("action"), $("form").serialize(),function(result) {
      $("resultDiv").html(result);
    });
});
相关文章：