防止页面重复提交

Web程序中，用户通过提交按钮submit把表单form中的数据提交给服务器进行处理。如果服务器处理的时间较长，或者网络速度较慢，浏览器在提交以 后，就会产生一段时间的等待。对于某些工作比较节奏很快的用户来说，这种等待打乱了工作节奏，不堪忍受。用户等了一秒钟，看到页面没有反映，就会再次点提 交按钮，又等了一秒钟，再次提交，如此反复。
对于这种重复提交，就可能产生一些性能问题甚至错误。
例如，现在做的一个发送公文并用短信通知的页面，如果用户重复提交，就会发送多遍公文和短信通知，产生不必要的麻烦。
如果是在添加商品之类的页面中重复提交，就会添加上重复的产品信息。
这些情况都应该从程序的角度而非用户的角度来避免。不能告诉用户，你不要重复点这个按钮，而是应该用程序实现不让他重复点提交按钮，或者多点了也无效。
功能很实用，代码很简单，如下。

<html>
<head>
    <title>PostOnce</title>
    <script type="text/javascript">
        function trySubmit() {
            if (this.submitFlag == 1) {
                alert('数据已经提交，请勿再次提交。');
                return false;
            }
            else {
                this.submitFlag = 1;               
                return true;
            }
        }
    </script>
</head>
<body>
<h3>防止重复提交</h3>
<form action="/Test/PostOnce2" method="post" onsubmit="return trySubmit()">
我是程序员老孙（孙继磊），点下面的按钮进行提交。<br />
<input type="submit" />
</form>
</body>
</html>
posted @ 2012-09-09 22:46  基础软件  阅读(3544)  评论(0)  编辑  收藏  举报