chrome关闭重复提交表单

JavaScript09

chrome关闭重复提交表单,第1张

1、首先通过js代码，当用户点击提交按钮后，屏蔽提交按钮使用户无法点击提交按钮或点击无效，从而实现防止表单重复提交。

2、其次在数据库建表的时候在ID字段添加主键约束，用户名、邮箱、电话等字段加唯一性约束。确保数据库只可以添加一条数据。

3、最后通过数据库加唯一键约束能有效避免数据库重复插入相同数据。

1、用 javascript 设置一个变量，只允许提交一次；

参考如下：

<script type="text/javascript">

var checkSubmitFlg = false

function checkSubmit(){

if (checkSubmitFlg == true){

return false

}

checkSubmitFlg = true

return true

}

document.ondblclick =

function docondblclick(){

window.event.returnValue = false

}

document.onclick =

function doconclick(){

if (checkSubmitFlg){

window.event.returnValue = false

}

}

</script>

<form action="action.php" method="post" onsubmit="return checkSubmit()">

用 javascript 将提交按钮或者 img 置为 disable；

参考如下：

<form action="action.php" method="post" onsubmit="getElById('submitInput').disabled = truereturn true">　

<img styleId="submitInput" src="images/ok_b.gif" border="0" />

</form>

1.js方法解决:关于js方法解决就是说通过js动态控制提交按钮不能多次点击，或者多次点击不起作用。

方案一:通过设立标识使表单不能重复提交:

var flag=true   function Sub(){        if(flag){

flag = false

document.form1.onsubmit()

}

}

方案二:一次点击后使得提交按钮变成不可用

<input type="button" value="login" onclick="this.disabled=truethis.form.submit()" />

总的来说,js解决方案是基本可以防止重复点击提交按钮造成的重复提交问题，但是前进后退操作，或者F5刷新页面等问题并不能得到解决。

最重要的一点，前端的代码只能防止不懂js的用户，如果碰到懂得js的编程人员，那js方法就没用了。

2.设置HTTP报头，控制表单缓存，使得所控制的表单不缓存信息，这样用户就无法通过重复点击按钮去重复提交表单。

<meta http-equiv="Cache-Control" content="no-cache, must-revalidate">

但是这样做也有局限性，用户在提交页面点击刷新也会造成表单的重复提交。

3.通过PRG设计模式(用来防止F5刷新重复提交表单):

PRG模式通过响应页面Header返回HTTP状态码进行页面跳转替代响应页面跳转过程。具体过程如下:

客户端用POST方法请求服务器端数据变更，服务器对客户端发来的请求进行处理重定向到另一个结果页面上，客户端所有对页面的显示请求都用get方法告知服务器端，这样做，后退再前进或刷新的行为都发出的是get请求，不会对server产生任何数据更改的影响。

但此方法也不能防止所有情况:例如用户多次点击提交按钮恶意用户避开客户端预防多次提交手段，进行重复提交请求

以上都说的是在客户端如何防止表单重复提交，下面说一下服务器端有哪些可行的方法。

4.如果是注册或存入数据库的操作，可以通过在数据库中字段设立唯一标识来解决，这样在进行数据库插入操作时，因为每次插入的数据都相同，数据库会拒绝写入。这样也避免了向数据库中写入垃圾数据的情况，同时也解决了表单重复提交问题。

但是这种方法在业务逻辑上感觉是说不过去的，本来该有的逻辑，缺因为数据库该有的设计隐藏了。而且这种方法也有一定的功能局限性，只适用于某系特定的插入操作。

5.session方法:

在struts框架中防止表单重复提交的方法是生成Token存入session，以此判断表单是否是第一次提交。以下给大家解释一下运行流程。

首先客户端请求服务器中的表单，服务器将客户机所请求的表单发给客户机同时发送一个特殊的随机数(Token)作为表单号存在表单的隐藏域中(type=hidden)，并且存入服务器端的session中。

在客户端填写完表单内容向服务器提交时，同时也将隐藏域中的表单号发给服务器端，服务器端此时会检测服务器端的表单号是否存在，如果存在，则进行提交操作，并删除此表单号，否则，服务器视为客户机端重复提交表单，不予操作。

此处贴出生成Token的代码(保证随机数的独一无二性):

class Token{    private Token(){}    private static Token instance = new Token()

public Token getinstance(){        return instance

}

//随机数发生器

public String getToken(){

String token = System.currentTimeMillis() + "" + new Random().nextInt()//获得毫秒数加随机数

try {

MessageDigest md = MessageDigest.getInstance("md5")           byte[] md5 = md.digest(token.getBytes())

BASE64Encoder base = new BASE64Encoder()

base.encode(md5)

} catch (NoSuchAlgorithmException e) {

e.printStackTrace()

}

return null

}

}

要强调的是，利用session方法解决表单重复问题是十分完美的，基本上可以应对各种重复提交问题。

但！是不是之前在客户端防止表单重复提交的种种方法就不使用了呢？

答案是否定的，我们需要多种方法混合使用才能达到最好的效果，也许有人会问，不是说session方法基本可以应对各种重复提交问题了吗？

这里我们所说的达到最好效果指的是，给用户更好地体验，例如用户点击了提交按钮，这时将按钮变为不可用的，用以告诉用户你已经提交内容了，不可重复提交。还有如果无论什么情况都用session防止表单重复提交问题，反而无形的增加了服务器端的负担。