java - 我可以重定向到另一个网页中的网页吗？

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>

Modal 弹出，填写并点击“添加”按钮，函数按预期执行。函数的最后是:

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 调用中被阻止，但我们会解决这个问题。

在 Action 中，函数如下所示:

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