Question

对于初学者，如果我的问题标题令人困惑，我感到抱歉。我不确定最好的措词方式。我也很抱歉以前是否曾询问过这样的问题-我尝试搜索，但找不到任何相关内容。

问题：我正在为仓库应用程序建立一个权限部分-它以具有功能（例如卸货）的功能（例如接收）开头。当然，还有更多的东西，但这应该是为此所需要的。

“功能”选项卡上有一个带有一组选项卡的网页-这些选项卡中的一个允许我查看功能下的功能列表，并添加/删除功能（如果允许）。所有样式都位于该首页上，其他页面则通过选项卡加载。当我更新“函数”页面（添加或删除函数）时，我的操作执行

return response.sendRedirect("url-for-webpage-here");

使用更新的数据将页面重定向回同一屏幕。

这里的问题是，此页面以所有样式加载到主页之外。

这是主页（feature.jsp）的基础：

<div class="d-flex flex-row mt-2">
    <div class="col-2 nav-tabs--div">
        <ul class="nav nav-tabs nav-tabs--vertical nav-tabs--left" role="navigation">
            <li class="nav-item">
                <a class="nav-link btn-block active" id="featureTab" data-toggle="tab" href="#featureSummary" role="tab" aria-controls="featureSummary">Feature Details</a>
            </li>
            <li class="nav-item">
                <a class="nav-link btn-block" id="featureFunctionsTab" data-target="#featureFunctions" data-toggle="tabajax" href="/Security/functions.do?method=load&featureID=<%=feature.getFeatureID()%>" role="tab" aria-controls="featureFunctions">Feature Functions</a>
            </li>
        </ul>
    </div>
    <div class="tab-content col-10">
        <div class="tab-pane fade show active" id="featureSummary" role="tabpanel">
            <!-- Stuff goes here -->
        </div>
        <!-- Blank div for AJAX loading of functions -->
        <div class="tab-pane fade" id="featureFunctions" role="tabpanel">

        </div>
    </div>
</div>

选择第二个导航项（功能功能）会将您带到第二个选项卡，将其使用的.jsp数据插入<div id="featureFunctions"></div>

在此页面上，有一个添加新功能的按钮：

<a href="/Security/modal_addFunction.jsp?featureID=<%=featureID%>" data-toggle="modal" data-target="#addFunctionModal" data-id="<%=featureID%>" class="addFunction btn btn-md btn-primary float-right mr-1 mt-1"><i class="fa fa-plus"></i>&nbsp;Add New Function</a>

将弹出模块，将其填写并点击“添加”按钮，该功能将按预期执行。该函数的结尾是：

response.sendRedirect("/Security/functions.do?method=load&featureID="+function.getFeatureID());

这是单击第一页上的选项卡时进行的完全相同的调用，但是由于它不会遍历同一页面，因此该网页显示时完全没有样式。

我正在寻找一种方法来通过已加载的原始页面（feature.jsp）发送此重定向，然后默认使用第二个选项卡（功能功能），因此用户不必单击以查看该功能的功能列表（如果可能）。我真的不确定我在这里有什么选择，所以我再次抱歉如果之前已经提到过！

Answer 1

经过与同事的大量搜索和讨论，结果答案是AJAX，而我做错了。

在上述页面上，modal_addFunction.jsp在页面上构建的表单的操作被设置为定向到将新功能添加到数据库的功能。看起来像这样：

<form name="newFunctionForm" id="newFunctionForm" method="post" action="/Security/functions.do?method=addNewFunction">
    <!-- Form goes here -->
    <div class="modal-footer">
        <button id="closeModalButton" type="button" class="btn btn-secondary" data-dismiss="modal"><i class="fa fa-times" aria-hidden="true"></i>&nbsp;Close</button>
        <button type="submit" class="btn btn-primary" id="addFunctionSubmit"><i class="fa fa-plus" aria-hidden="true"></i>&nbsp;Add</button>
    </div>
</form>

此表单的操作将在AJAX调用中被阻止，但我们将继续说明。

在操作中，该函数如下所示：

    public ActionForward addNewFunction(ActionMapping mapping, ActionForm form, HttpServletRequest request, HttpServletResponse response){
        HttpSession session = request.getSession(false);
        if(SecurityEJBServices.checkSession(session, request, response))
            return null;
        FunctionsServices fs = new FunctionsServices();
        FunctionForm functionForm = new FunctionForm(request);
        try{
            Function function = new Function();
            //set Function stuff here

            boolean added = fs.addFunction(function);

            PrintWriter out = response.getWriter();
            if(added){
                out.write("success");
            }else{
                out.write("error");
            }
        }catch(Exception e){
            e.printStackTrace();
        }
        return null;
    }

PrintWriter将响应写回到AJAX函数，该函数在模式中重新建立。看起来像这样：

<script type="text/javascript">
$(document).ready(function(){
    $(function(){
        $('#newFunctionForm').submit(function(e){
            e.preventDefault();
            var form = $(this);
            var post_url = form.attr('action');
            var post_data = form.serialize();
            $.ajax({
                type: 'POST',
                async: false,
                url: post_url,
                data: post_data,
                success: function(data){
                    console.log("DATA: " + data);
                    if(data == 'success'){
                        $('#errorDiv').hide();
                        $('#addFunctionModal').modal('hide');
                        $('#functionTable').load("/Security/functions.do?method=getFunctionsAjax&featureID=<%=featureID%>");
                        $('.modal-backdrop').remove();
                    }else{
                        $('#errorDiv').show();
                    }
                }
            });
        });
    });
});
</script>

#functionTable表与它所在的div位于一个完全独立的jsp中，并通过<jsp:include>调用进行引用，该调用会将该jsp中存在的表加载到div中。这是我的错误。我以为整个div位于一个单独的jsp中就足够了，但是我不得不走得更远，将表放在另一个单独的jsp中，以允许仅刷新和重新加载数据。

我可以重定向到另一个网页内的某个网页吗？

1 个答案: