| 防止重复提交:
方案1:灰掉按钮
预期效果:
点“查询”按钮时,按钮灰掉,出来查询结果后,按钮恢复
实现方式:
<input type="button" id="qrybutton" value=" 查 询 " onclick="javascript:check1(document.queryForm1); return false;">
查询提交后,用下面的代码灰掉按钮
document.getElementById("qrybutton").disabled = true;
在结果页面,用下面代码重新激活
window.parent.document.getElementById("qrybutton").disabled = false;
优点:客户体验较好
缺点:需要为每个按钮定义id,并在在两个页面控制按钮的是否可用,代码不够简洁
方案2:等待页面showwaiting方法
预期效果:
点“查询”按钮,出现等待框,查询结果出来,等待框消失
实现方式:
wait.jsp已经包含showWaiting()、hideWaiting() 两个方法,分别控制waiting、cover 两个属性的显示与否,但他们控制的都是同一个页面的对象,现增加第三个方法:hideParentWaiting() 用来控制父页面的等待对象。
使用时在查询提交之后调用showWaiting()方法,在结果页面进入时执行hideParentWaiting()方法即可。
注意:使用到这些方法的页面,都必须引入wait.jsp
使用实例:
查询条件页面:
<%@include file="/internet/wait.jsp" %>
check(frm);
showWaiting();
结果页面:
<script language="javascript">
hideParentWaiting();
</script>
wait.jsp:
<script language=javascript>
function showWaiting() {
waiting.style.visibility="visible";
cover.style.visibility="visible";
}
function hideWaiting() {
waiting.style.visibility="hidden";
cover.style.visibility="hidden";
}
function hideParentWaiting() {
window.parent.document.all.waiting.style.visibility="hidden";
window.parent.document.all.cover.style.visibility="hidden";
}
</script>
<div id="waiting" style="position:absolute; top:200; left:20; z-index:10; visibility:hidden">
<TABLE WIDTH=100% BORDER=0 CELLSPACING=0 CELLPADDING=0>
<TR>
<td width=30%></td>
<TD bgcolor=#2073AB>
<TABLE WIDTH=100% height=70 BORDER=0 CELLSPACING=2 CELLPADDING=0>
<TR>
<td bgcolor=#E3ECF1 align=center id=progress>处理中,请稍候...</td>
</tr>
</table>
</td>
<td width=30%></td>
</tr>
</table>
</div>
<div id="cover" style="position:absolute; top:0; left:0; z-index:9; visibility:hidden">
<TABLE WIDTH=100% height=600 BORDER=0 CELLSPACING=0 CELLPADDING=0>
<TR>
<TD align=center><br>
</td>
</tr>
</table>
</div> |