Question

我继承了一个struts2 / JSP webapp并遇到了一些问题，我想知道它是否正确结构化/分层。登录后，用户位于主屏幕“仪表板”上。像这样：

<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操作会读取＆＃34; selectedMenuItem＆＃39; struts变量，并返回struts.xml映射到正确JSP的结果，如ProjectList.jsp或UserList.jsp。这个主页＆＃39;页眉/页脚/左侧菜单始终保留在浏览器中，只有iframe中的中间内容被用户想要的内容替换。我认为这是合理的，但我已经了解了如果可能的话应该如何避免iframe。这个结构的一个问题出现在我写的另一个问题中：Action name/url name in debuggers using Struts 2

另一个问题是，当用户单击菜单项时，Chrome调试器不会刷新JSP / javascript源文件。如果我放一个调试器; $（window）中的语句.load（）;它将使用断点，但它在原始仪表板源文件中显示一个随机位置，而不是实际执行的文件/ javascript。 Chrome缓存已停用，但调试程序拒绝加载新的源文件。

那么struts / JSP应该如何布局和结构化？有没有比iframe更好的方法来加载内容＆＃39;部分＆＃39;的页面？我认为应该避免整页刷新以提高效率。为什么Chrome调试器无法正确处理？

Answer 1

无需使用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);
    });
});

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

1 个答案: