我可以重定向到其他网页内的网页吗？

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中，以便只刷新和重新加载数据。