8.10 防止表单重复提交
οnclick="this.disabled = true;"/>
特别是在脚本需要很长时间分析表单数据时，用户很可能会再次提交表单来尝试加快速度。然而，在网上购物、信用卡支付和其他重要的交易中，可能涉及大笔资金。因此，网页本身应当努力避免表单被重复提交。
上面的代码(在本主题相关的下载文件prevent.html里)就是这样实现的：在单击了提交按钮后，按钮的disabled属性被设置为true，使得按钮不能再被点击(当JavaScript启用时)。图8-5展示了浏览器中的结果：按钮变灰。
(点击查看大图)图8-5 按钮不能被点击两次
上面的代码和代码清单8-10都是提交表单数据到名为delay.php的PHP脚本，它在等待5秒后才发送数据。这样做考虑到了网络连接缓慢或服务器缓慢的情况。这是本节语句的主要用意。
还有一种方法是通过维护按钮状态，判断是否单击了按钮，如代码清单8-10所示。
代码清单8-10 通过维护状态变量来防止表单被重复提交(prevent- status.html)
varsubmitted =false;
functioncheckform(f) {
if(submitted) {
window.alert("Form has already been
?submitted!");
returnfalse;
}else{
submitted =true;
returntrue;
}
}
οnsubmit="return checkform(this);">
警告 尽管这个语句非常方便，你需要意识到有时服务器会在没有预兆的情况下关闭到客户端的连接(反之亦然)。然后数据传输就中止了，但JavaScript代码无法得知这些。其结果是按钮不能被点击两次(如预期的那样)，却未能有效地发送数据。这样用户就需要重新载入表单来重新提交数据。
【责任编辑：云霞 TEL：(010)68476606】
点赞 0