Ajax在弹出div上显示响应，而不重定向浏览器选项卡上的响应

Question

我正在一个项目（struts框架）上工作，我想更改设计的UI。在现有项目中有菜单选项卡。在现有项目中，单击每个菜单后，jsp页面正在新的浏览器窗口中打开。我想在在modal（popup）而不是新的浏览器窗口上。我添加了以下代码。 topMenu.jsp包含带有各种子菜单的菜单选项卡。 topMenu.jsp

<nav class="navbar navbar-default navbar-static-top">
    <div class="container">
        <div class="collapse navbar-collapse navbar-right" id="bs-example-navbar-collapse-8"> 
            <ul class="nav navbar-nav">
                <li><a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" >
                    Menu1 <span class="caret"></span>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a data-toggle="modal" data-target="#js-custom1" href="" onclick="$('#js-custom1').load('showCustomerList.do');">Customers</a></li>
                        <li><a data-toggle="modal" data-target="#js-custom2" href="" onclick="$('#js-custom2').load('showVendorList.do');">Vendors</a></li>
                        <li><a data-toggle="modal" data-target="#js-custom3" href="" onclick="$('#js-custom3').load('showVendorEditList.do');">VenderEdit</a></li>
                    </ul>
                </li> 
            </ul>
        </div>
    </div>  
</nav>                  
<!-- Load the modal -->
<div class="modal fade" id="js-custom1" tabindex="-1" role="dialog"></div>  
<div class="modal fade width-more" id="js-custom2" tabindex="-1" role="dialog"></div>   
<div class="modal fade width-more" id="js-custom3" tabindex="-1" role="dialog"></div>

单击“ VenderEdit”菜单后，它将在弹出窗口（模态）上加载VendorEdit.jsp和动态数据。单击“搜索”按钮后，将提交表单，但响应将显示在浏览器的新选项卡上，而不是“ testResult” div 。

VendorEdit.jsp

<script language="JavaScript">
function checkSearch() { 
    $(document).ready(function() {
                document.VendorEditListForm.direction.value = "Search";
                $.ajax({ 
                    data: $('#frmAPVendorEdit').serialize(), 
                    type: $('#frmAPVendorEdit').attr('method'), 
                    url: $('#frmAPVendorEdit').attr('action'), 
                    success: function(response) { 
                        $('#testResult').html(response); 
                    }
                }); 
                return false; 
            });
}
</script>
<formFieldErrors:formErrors form="VendorEditListForm"/>
<div class="modal-dialog" role="document">
    <div class="modal-content">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"></button>
            <div class="modal-body">
            <html:form scope="request" action="/showVendorEditList" method="post" styleId="frmAPVendorEdit">        
                 //...these area contain form fields like input,check box,combo box,etc..
                 <div class="row">
                    <div class="btn-group btn-group-right">
                        <a href="" class="btn btn-white btn-indent-right">Help</a>
                        <html:submit value="Search" onclick="checkSearch();" property="submitButton" styleClass="btn btn-light" ></html:submit>
                    </div>
                </div>
            </html:form>
            <div id="testResult"></div>
        </div>
    </div>
</div>

struts-config.xml

<struts-config>
    <form-beans>
        <form-bean name="VendorEditListForm" type="com.ui.struts.form.VendorEditListForm" /> ...
    </form-beans>
    <global-forwards>
        <forward name="ShowVendorEditJsp" path="/showVendorEditList.do" /> ...
    </global-forwards>
    <action-mappings>
        <action name="VendorEditListForm" path="/showVendorEditList" scope="session" type="com.ui.struts.action.ShowVendorList" unknown="false" validate="false">
            <forward name="ShowVendorListJsp" path="/VendorEdit.jsp" redirect="false" />
        </action> ...   
    </action-mappings>
</struts-config>

我该怎么做才能使响应显示在模式/弹出窗口而不是新的浏览器选项卡上？ 我需要在代码中进行哪些更改？

Answer 1

我会尝试删除表单submit按钮，并将其替换为普通按钮。 这应该足够了，因为您正在使用onclick 。

<button type="button" class="btn btn-default" onclick="checkSearch();" >Search</button>