现在AJAX横行,也许很少有人用隐藏form提交来实现不刷新页面更新了,在AJAX以前,一般都用隐藏form提交来实现页面不刷新提交数据.
现在对比一下ajax与隐藏form提交的利与弊。
1.隐藏form提交,更新数据完成后,需要转到一个空白页面再对原页面进行提交后处理;ajax则不用,可以直接返回原页面进行提交后的处理。可见ajax可以比隐藏form提交少增加一个页面。
2.ajax出于安全性考虑,不能对文件进行操作,所以不能通过ajax来实现文件上传,而通过隐藏form提交可以实现这个功能,所以这就是用隐藏form提交的主要用途。
接下来讲述如何通过隐藏form来实现提交数据。
第一步:
<iframe name="issueFrameList" frameborder=0 width="100%" height="400" scrolling="no">
</iframe> //用于存放提交返回后的空白页面
<s:form id="issueFormList" action="searchIssue_searchIssue" target="issueFrameList" method="post">
</s:form> //用于指定提交返回页面显示在这个iframe中
第二步:
document.issueFormList.submit();
提交后,进入后台处理完成(issues = issueManager.getAll();),返回一个jsp页面(aa.jsp),这个页面在iframe中生成.
<c:set var="issueCheckAll"><input type="checkbox" id="issueCheckAll" οnclick="javascript:checkall();" /></c:set>
<display:table name="issues" class="simple" requestURI="" id="issueList" export="false" pagesize="10">
<display:column headerClass="checkbox" title="${issueCheckAll}" style="width:5">
<input type=checkbox name="check" id="issueCheck" value="${issueList.id} : ${issueList.name}" />
</display:column>
<display:column titleKey="bug.html.issue.proId" style="width:30%">${issueList.id}</display:column>
<display:column titleKey="bug.html.issue.summary" maxLength="20" style="width:70%"><c:out value="${issueList.name}"/></display:column>
</display:table>
<script type="text/javascript">
function checkall() {
checkAll(document.getElementById("issueCheckAll"),"issueCheck");
}
function checkData() {
$("#issueCheckAll").removeAttr("checked");
return $("input:checked[type=checkbox][name=check]");
}
</script>
第三步:
可以通过parent对象对原页面进行操作,比如原页面定义了updatePageFromSubmit()方法,
则在aa.jsp页面中通过parent.updatePageFromSubmit()来进行提交后的处理.
原页面也可以issueFrameList.checkData()来调用aa.jsp页面中的方法。