我有两个jsp页面1.view.jsp,2.popup.jsp(它是一个弹出页面)。当我点击view.jsp上的'添加图标'时,将加载popup.jsp。我想知道如何使用Ajax在'popup.jsp'上点击'submit'按钮时,在我的'view.jsp'上加载值(不刷新页面)。
view.jsp的
<body>
<div class="st-content">
<jsp:include page="/WEB-INF/jsp/settings/adminmenu.jsp" />
<div class="width1">
<div class="mgmt-menu-bar font-new">
<div class="margin-left10 margin-top line-height1 ">
<a href="executeIndustry">
<div class="menunew cursor red">
<i class="icon-list icon-grey1"></i> Industry</div>
</a>
<a href="viewDepartment">
<div class="menunew cursor" ><i class="icon-list icon-grey1"></i> Department</div>
</a>
<a href="addViewDesignation">
<div class="menunew cursor" ><i class="icon-list icon-grey1"></i> Designation</div>
</a>
</div>
</div>
<div class="mgmt-content-right">
<div class="width2 margin-left10">
<div class="content-table-full">
<div class="content-h bold margin-left margin-top">Industry
<div class="top-right-icon2 cursor" data-toggle="tooltip" title="Add Industry" onclick="TINY.box.show({iframe:'addPageIndustry.action',boxid:'frameless',width:456,height:200, fixed:false,maskid:'bluemask',maskopacity:40})" >
<i class="icon-plus icon-grey1"></i>
</div>
</div>
<s:form action="executeIndustry" name="paginationForm" id="paginationForm">
<s:hidden name="industryId" id="industryId"/>
<s:if test="%{success!=null}" >
<div id="error" style="color:#048350;margin-top: 10px" >
<s:property value="success"/>
<br/>
</div>
</s:if>
<s:if test="%{error!=null}" >
<div id="error" style="color: #FF0000;margin-top: 10px">
<s:property value="error"/>
<br/>
</div>
</s:if>
<table width="100%" cellpadding="0" cellspacing="0" class="margin-bottom margin-top table-display">
<tr class="row-header">
<td >
Industry </td>
<td width="450">Created Date</td>
<td width="200">Action</td>
</tr>
<s:if test="%{industrylist!= null && industrylist.size > 0}">
<s:iterator value="industrylist">
<tr class="row1">
<td > <s:property value="industryName"/></td>
<td> <s:date name="createdDate" format="dd/MM/yyyy hh:mm:ss a"/></td>
<td>
<i class="icon-edit icon-grey1 cursor" title="Edit" data-toggle="tooltip" onclick="TINY.box.show({iframe:'editIndustry.action?editid=<s:property value="industryId"/>',boxid:'frameless',width:456,height:200, fixed:false,maskid:'bluemask',maskopacity:40})"></i>
<i title="Delete" data-toggle="tooltip" onclick="deletethis('<s:property value="industryId"/>')" class="icon-minus-sign icon-grey1 cursor"></i>
</td>
</tr>
</s:iterator>
</s:if>
<s:else>
<tr class="row1">
<td colspan="4" align="center">No industries were found</td>
</tr>
</s:else>
<s:hidden name="deleteid" id="deleteid"></s:hidden>
</table>
<div class="width2">
<s:if test="%{industrylist.size()>0}">
<%@ include file="/WEB-INF/jsp/pagenation/pagination.jsp" %>
</s:if>
</div>
</s:form>
</div>
</div>
</div>
</div>
</div>
<jsp:include page="/common/commonfooter.jsp" />
<script type="text/javascript" src="shared/scripts/js/pagination.js"></script>
</div>
popup.jsp
<body>
<div class="pop-box">
<s:if test="%{edit!=1}" >
<s:form action="addIndustry" method="post" id="FormOne" name="FormOne" target="_top" cssClass="validate">
<span style="margin-left:10px;" class="heading-st2">Add Industry</span>
<div class="popup-style">
<div class="row-form">
<span class="red">*</span>Industry
</div>
<div class="row-form ">
<s:textfield name="industryName" id="industryName" cssClass="input-xlarge required-field" oncopy="return false" onpaste="return false" oncut="return false" onkeypress="return isNumberKey(event)" maxlength="60" />
</div>
<div class="row-form">
<button type="submit" class="btn btn-success ">Submit <i class="icon-ok icon-white"></i></button>
<span class="help-inline"></span>
</div>
</div>
</s:form>
</s:if>
<s:else>
<s:form action="updateIndustry" method="post" id="FormOne" name="FormOne" target="_top" cssClass="validate">
<s:hidden name="industryId"/>
<span style="margin-left:10px;" class="heading-st2">Edit Industry</span>
<div class="popup-style">
<div class="row-form">
<span class="red">*</span>Industry
</div>
<div class="row-form ">
<s:textfield name="industryName" id="industryName" cssClass="input-xlarge required-field" oncopy="return false" onpaste="return false" oncut="return false" onkeypress="return isNumberKey(event)" maxlength="60" />
</div>
<div class="row-form">
<button type="submit" class="btn btn-success ">Submit <i class="icon-ok icon-white"></i></button>
<span class="help-inline">
</span>
</div>
</div>
</s:form>
</s:else>
</div>
答案 0 :(得分:0)
$(document).ready(function(){
var frm = $('#myform');
frm.submit(function (ev) {
$.ajax({
type: frm.attr('method'),
url: frm.attr('action'),
data: frm.serialize(),
success: function (data) {
alert("submitted");
},
error:function(data){
alert("error");
}
});
window.scrollTo(0,0);
ev.preventDefault();
});
以上jquery ajax可以帮助您在不刷新的情况下提交动作提交......