input表单重复提交事件,前后端解决思路

方法一:ajax提交,就要在提交之后禁用掉按钮(前端)

$('#submit').click(function(){
   $.ajax(...)
   $(this).attr('disabled,true) // 禁用按钮or
   $(this).css('pointer-event','none') // 来禁用点击事件
})

方法二:增加参数,判断提交次数(前端)

function onLine(objIds){
	var num = 0;
	layer.confirm('处理视频?', {
		btn: ['上架','退回','取消'], 
		shade: false,
		closeBtn: 1
	},
	function(){
		num += 1;
		if (num == 1) { // 不等于1说明是重复提交
			$.ajax({
				type: 'POST',
				.........

方法三 :JS加锁机制(前端)

	/出库
	output: function () {
	 console.log("出库请求---");           	                                    
	 var lock=false;//默认未锁定
	 var myconfirm=layer.confirm('是否确认出库?',{btn: ['确定','取消']},function(index){
	             console.log('success');
	             console.log(lock);
	              //
	              if(!lock){
	             	 lock=true;//锁定
	                  //发送
	                console.log("ajax---");
	                  //发送ajax
	                    $.ajax({
	                        url:  '/dubbo/../outBoundByTask.json',
	                        isAysn: false,
	                        type: 'get',
	                        contentType: 'application/json',
	                        data:params.join('&'),
	                        success: function (result) {
	                                               	
	                        	var res=$.parseJSON(result);
	                         var code=res.code;
	                         	
	                         	if(code==0){
	                         		layer.msg("操作成功!");
	                         		window.location.reload();
	                         	}else{
	                         		layer.msg(res.msg);
	                         	}
	                       }
	                    });
	              }
	              layer.close(myconfirm);
	             }
	             ,function(index){
	               console.log('fail');
	             });
	     }

方法四:layui加遮罩层(前端)

 /* 监听提交 */
 form.on('submit(component-form-demo2)', function (data) {
     layer.confirm('请确认输入数据是否准确无误', {
         btn: ['确定', '取消'],
         title: "立即提交",
     }, function () {
         layer.close();
         layer.load(0,{shade: [0.7, '#393D49']}, {shadeClose: true}); //0代表加载的风格,支持0-2
         $.ajax({
             'url': '{:Url("admin/Repertory/add")}',
             'data': JSON.stringify(data.field),
             'success': function (data) {
                 if (data.code === 1) {
                     layer.alert(data.msg, {
                         title: '成功'
                     },function () {
                         layer.closeAll();
                         //执行重载
                         location.reload();
                     });
                 } else {
                     layer.closeAll();
                     layer.alert(data.msg, {
                         title: '失败'
                     });
                 }
             },
             'dataType': 'json',//返回的格式
             'type': 'post',//发送的格式
         });
     });
     return false;
 });

请添加图片描述

方法五:利用PHP的Session功能(后端)

  • Session保存在服务器端,在PHP运行过程中可以改变Session变量,下次访问这个变量时,得到的是新赋的值.
  • 所以,可以用一个Session变量记录表单提交的值,如果不匹配,则认为是用户在重复提交。-
    简单来说,就是生成随机数,存到session中,提交时与session中的随机数校验.
A页面
<?php
session_start();                //根据当前SESSION生成随机数
$code = mt_rand(0,1000000);
$_SESSION['code'] = $code;      //将此随机数暂存入到session
?>
 
说明
B页面:
<?php
session_start();
if(isset($_POST['originator'])) {
    if($_POST['originator'] == $_SESSION['code']){
        echo "ok";
        unset($_SESSION["code"]);               //将其清除掉此时再按F5则无效
    }else{
    echo "请不要刷新本页面或重复提交表单";
    }
}?>
  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值