解决表单重复提交

最新推荐文章于 2022-04-09 12:29:54 发布

billfeller

最新推荐文章于 2022-04-09 12:29:54 发布

阅读量897

点赞数

分类专栏： php 文章标签： token session input insert 数据库浏览器

php 专栏收录该内容

92 篇文章 1 订阅

订阅专栏

解决表单重复提交

这应该是个很长久的问题……长久得在网上一搜大把解决方案，就是关于如何防止表单重复提交的问题，而paperen这里也就再来解析一下解决的方法与原理，毕竟也是一个实用的技术。如果您已经知道如何解决的话那么这篇文章可能不适合你的口味，paperen这里也打算从基础开始讨论，所以希望一步看到解决方案的您也可能不太适合，所以请注意。So~开始吧 ~

paperen想您一定知道表单是什么吧，form元素就是表单，一般网页需要输入的地方必定使用了表单元素，也很常见，一般的代码如下：

  
  <form 
 
method="post">
<p>
    <label for="test">随便输入点什么</label>
    <input type="text" name="data" id="test" />
</p>
<p>
    <input type="submit" value="提交" name="submit" />
</p>
</ul>
</form>

重点其实是form与input元素，p元素只是paperen私自加上去的，对后续的说明没有任何影响，其实很简单，所谓input就是输入了，你可以完全将input 元素理解为是用作用户输入，只是某些属性的（type）不能作为输入而已（这里就是submit），而form元素你完全可以将它理解为是一个袋子，将所有用户输入数据到装在它里面之后用来提交回服务端处理，但对于form元素值得注意的是method属性，一般来说有get与post两种方法，其实不要想得太复杂（因为深入的不需要太理解，对于后续的内容没有太多关系，如有兴趣不妨可以使用浏览器的调试工具查看请求头部信息与发送信息，例如firebug），表现出来就是，使用get提交表单的话所有的input元素的值将会在地址栏处出现，而post则不会，例如使用get提交此表单后的浏览器地址栏

http://localhost/mytest/token/form.php?data=test&submit=%E6%8F%90%E4%BA%A4

post则在地址栏看不到了，使用fiebug可以看到如下信息

可以简单认为get是显式传送数据的，而 post则是隐式传送数据的，但还有一个很大区别的是post支持更多更大的数据传送。

Next，当表单代码写好了，那么让我们来进行服务器脚本的编写（这里就是PHP）。很简单 ~

  
  <?php
if ( isset( $_POST['submit'] ) ) {
	//表单提交处理
	$data = isset( $_POST['data'] ) ? htmlspecialchars( $_POST['data'] ) : 
 
'';
	//Insert or Update数据库
	$sql = "insert into test (`string`) values ('$data')";
	//do query
	echo $sql;
}
?>

因为这里是post传送数据的，所以使用PHP的$_POST全局变量就能获取到表单提交的数据，所有使用post方法的表单数据提交到服务端都会被保存在这个$_POST全局变量中，不妨可以试试print_r( $_POST )这个变量你就明白了。

首先检查一下是否在$_POST数组里面存在submit，如果存在则证明是表单提交过来的，正如asp.net中好像有个叫ispostback的一样，只是这样没那么严谨而已，但是不要紧之后会解决这个问题的。

之后接收输入框的数据，就是$_POST['data']，别忘了使用htmlspecialchars对这个进行一下html过滤，因为防止输入了html标签或javascript造成问题(貌似叫做XSS漏洞)。最后就是拼接到sql语句中送入数据库跑了(只是这里paperen并没有很详细使用一些操作数据库的函数例如mysql_query，有兴趣自己完成它)。恭喜，到了这里你已经顺利地完成了一个数据录入的功能了，但是有个地方你总得改善吧，插入数据后总得给操作者一个提示吧~~至少提示我操作失败还是成功。所以整个代码paperen写成以下样子。

  
  <?php
if ( isset( $_POST['submit'] ) ) {
	//表单提交处理
	$data = isset( 
 
$_POST['data'] ) ? htmlspecialchars( $_POST['data'] ) : '';
	
	//connect
	mysql_connect( 'localhost', 'root', 'root' );
	
 
//select db
	mysql_select_db( 'test' );
	//设置字符集防止乱码
	mysql_query( 'set names "utf8"' );
	//SQL
	$sql = "insert 
 
into `token` (string) values ('$data')";
	//query
	mysql_query( $sql );
	
	$insert_id = mysql_insert_id();
	if ( 
 
$insert_id ) {
		$state = 1;
	} else {
		$state = 0;
	}
}
?><?php if ( isset( $state ) 
&& $state ) { //数据插入成功 ?>
<p>插入成功 <a href="form.php">返回</a></p>
<?php } else { //失败或者没有插入动
作 ?>
<form method="post">
<p>
    <label for="test">随便输入点什么</label>
    <input type="text" 
name="data" id="test" />
</p>
<p>
    <input type="submit" value="提交" name="submit" />
</p>
</ul>
</form>
<?php } ?>

html的声明与head还有body都省略了，对比于一开始的代码其实主要是实现了真正插入数据库动作与给出了操作反馈(通过$state变量)，不妨自己拷贝代码然后试试(当然请根据自己实际情况修改数据库操作部分的代码)。代码正常，逻辑没问题，但是有个问题，就是在显示插入成功后再刷新页面又会执行了表单处理动作，又插了一遍数据！这就是所谓的重复插入问题。在放出解决方案之前您可以自己思考一下该如何解决。

你会不会认为是接收数据与显示处理结果都是这个页面所以才会导致这个问题？也对，也可以这么认为，使用一些调试工具你会发现，浏览器还对post的数据进行了保留，故在提交完表单后再刷新的话该post数据会重新提交了一遍。

如果有办法将浏览器的这个临时保存的post数据清空掉不就解决问题了，但服务端是没法做到这点的，因为这是浏览器自身的事情，要么我们就重定向了不然再刷新还是会重复提交数据。

到目前为止也许你已经了解到重复提交的意思与问题的恶劣所在，如果你不是选用重定向的办法那么就得另外想一个办法了，所以令牌解决办法就是这么过来的。

正如令牌本身代表着权限，操作权，身份标志等等，所以我能不能为我的表单加上这么一个身份标志，在客户端每次请求这个表单的时候同时生成一个令牌其挂钩，在提交时再进行判断，正确则接收并处理表单。实现本质就是如此，而反映到具体实现上，就需要用到一种叫 session的东西。关于session的解析，参见wiki

简单的理解就是session也是一种令牌的概念，所以你可能会很惊奇，“什么我已经使用了令牌？！”，是的，但是我们要实现的不仅仅是session而是在其基础上附加一些数据来实现我们想要的表单令牌。So let's do it！

session在php中也是被存放在$_SESSION这个超级全局变量里面的，启用起请使用session_start()，关于其他服务端脚本原理一样，只是可能调用方法名不一致而已。加入 token后的代码如下：

  
  <?php
//开启session
session_start();
if ( isset( $_POST['submit'] ) && valid_token() ) {
    //表单
 
提交处理
}
 
/**
 * 生成令牌
 * @return string MD5加密后的时间戳
 */
function create_token() {
    //当前时间戳
    
 
$timestamp = time();
    $_SESSION['token'] = $timestamp;
    return md5( $timestamp );
}
/**
 * 是否有效令牌
 * @return bool 
 
 
 */
function valid_token() {
    if ( isset( $_SESSION['token'] ) && isset( $_POST['token'] ) && $_POST['token'] == md5( 
 
$_SESSION['token'] ) )
    {
        //若正确将本次令牌销毁掉
        $_SESSION['token'] = '';
        return true;
    }
    return false;
}
?>
<?php if ( isset( $state ) && $state ) { //数据插入成功 ?>
<p>插入成功 <a href="form.php">返回
 
</a></p>
<?php } else { //失败或者没有插入动作 ?>
<form method="post">
<p>
    <label for="test">随便
 
输入点什么</label>
    <input type="text" name="data" id="test" />
</p>
<p>
    <input type="submit" value="提
 
交" name="submit" />
</p>
</ul>
<!-- Token -->
<input type="hidden" value="<?php echo create_token(); //生成
 
令牌 ?>" name="token" />
<!-- Token -->
</form>
<?php } ?>

部分代码paperen这里省略，因为并不是重点，其实加的东西只有3处：

第一，在表单结束前加入了一个input元素，记得type为hidden（隐藏域）

第二，增加了两个函数，create_token与valid_token，前者用来生成令牌的后者用来验证令牌的

第三，在if中多加一个条件，valid_token

那就大功告成了，很简单，而且所有的东西都聚集在新加的两个函数中。paperen这里使用的令牌很简单就是时间戳，将请求表单时的时间戳存储到$_SESSION['token']中，那么验证令牌就明白了，就是检查客户端提交过来的$_POST['token']是否与md5后的$_SESSION['token']一致就行了，当然还要加上存在$_POST['token']与$_SESSION['token']这两个变量才行。

你可以将这个简单的令牌模式封装得更加棒并扩展一下功能，例如加上表单提交超时验证也是个不错的动手机会。

最后附上之前paperen扩展codeingeter的Form_validation类文件，主要是扩展上令牌与表单超时。压缩包中welcome.php是控制器文件，请放置到 application\controller中(如不想增加这个控制器可以打开然后将token方法复制下来放到已有的其他控制器中)；MY_Form_validation.php请放到application\libraries中。

转自：http://iamlze.cn/post/use-token-avoid-repeated-form-submit