问题:
在做项目过程中,遇到表单多次提交造成服务器瘫痪的问题,现在需求是——1分钟内只允许用户提交一次,提交后,提交按钮变灰色,1分钟后再恢复正常。
解决方法:
采用cookie,保存提交表单时间,一分钟后,cookie失效,按钮恢复正常。
<button type="button" class="btn btn-primary addpower_btn">添加权限</button>
<script src="../js/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="../js/jquery.cookie.js" type="text/javascript"></script>
<script type="text/JavaScript">
$(function(){
//设置cookie,通过时间间隔
$('.addpower_btn').click(function () {
$.cookie('cookieName', 'cookieValue', { path: '/', expires: 1 }); //1天后失效
return false;
});
// 设置cookie,到期时间
$('.addpower_btn').click(function() {
var date = new Date();
var t = new Date();
//设置cookie失效时间为60s,转换为毫秒,getTime()获取时间也为毫秒
date.setTime(date.getTime() + (60 * 1000));
$.cookie('myCookie', t.getTime(), { path: '/', expires: date });
return false;
});
//设置一个函数,测试cookie何时失效
function testCookie(){
var cookie = $.cookie("myCookie"); //读取cookie
if(cookie) {
$('.addpower_btn').attr('disabled','true'); //按钮不可用
} else {
$('.addpower_btn').removeAttr("disabled"); //移除按钮不可用属性
alert('cookie不存在');
}
}
});
</script>
其他cookie方法:
// 获取 cookie,直接获取name
alert($.cookie('cookieName'));
// 删除cookie,cookie值为空即可
$.cookie('cookieName', null, { path: '/' });