使用js控制表单重复提交(1加锁,2事件方式,3 EasyUI中解决表单重复提交)

时间:2022-09-17 18:04:54
方法一、
var flag = true;
$(function() {
	$("#interested").click(function() {
		beInterested();
	});
});

function beInterested() {
	//$("#interested").unbind("click");
	if (!flag) {
		alert("已感兴趣!");
		return;
	}
	if (flag) {
		var newNum = parseInt($("#beInterestedVal").attr("value"));
		// 点击之后就立即改变值
		$("#beInterestedVal").attr("value", newNum + 1);
		$("#beInterestedVal").text(newNum + 1);
		flag = false;
	}

	var copyrightid = $("#copyrightid").val();
	jQuery.ajax({
		type : 'POST',
		url : "/cartoon-web/copyRight/beInterestedIn",
		data : {
			"cid" : copyrightid
		},
		dataType : 'json',
		success : function(data) {
			if (data.result == 'success') {
				flag = false;
				// 设置设置不可以再点击
				// $("#interested").unbind("click");
				// alert("修改数据成功,要改变样式,不让此点再次点击!");
			} else {
				flag = true;
				alert(data.msg);
			}
		},
		error : function(XMLHttpRequest, textStatus, errorThrown) {
			alert("网络或者其它原因导致的错误!");
			flag = true;
		}
	});
}

方法二、

$("#publicCopyRight").click(function() {
			var b = validator.form();
			if (b == true) {
				submitForm();
			}
		});
var lock = true;
function submitForm() {
	var cid = $("#copyrightForm #cid").attr("value");
	/* 版权方名称 */
	var copyRightName = $("#copyRightName").val();
	/* 联系方式 */
	var contact = $("#contact").val();
	/* 作品名称 */
	var worksName = $("#worksName").val();
	/* 作品类别 */
	var worksCategory = $("#worksCategory").val();
	if (worksCategory == "请选择...") {
		worksCategory = "";
	}
	console.log("worksCategory = " + worksCategory);
	/* 授权价格 */
	var price = $("#price").val();
	/* 作品介绍 */
	var worksInfo = $(document.getElementsByTagName('iframe')[0].contentWindow.document.body).html();
	// alert(worksInfo);
	/* 授权范围 */
	var auScope = $("#auScope").val();
	/* 授权期限 */
	var auDeadLine = $("#auDeadLine").val();
	/* 本信息有效期限 */
	var termOfValidity = $('input[name="termOfValidity"]:checked').val();
	/* 表示是否同意的标识 */
	//console.log(document.getElementById("agreeFlag").checked);
	var agreeFlag = (document.getElementById("agreeFlag").checked == true) ? 1 : 0;
	if(agreeFlag == 0) {
	    lock = false;
	    alert("对不起,您得先同意酷漫网相关法律声明才可以发布版权信息!");
	    $("#low-declare").css("color","red");
	} else {
		lock = true;
		$("#low-declare").css("color","#2d3e53");
	}

	/* 获取图片上传的路径 */
	var copyRightImage = $("#posterUrl").val();

	if (lock == true) {
		$("#publicCopyRight").unbind("click");
		lock = false;

		jQuery.ajax({
					type : 'post',
					url : url,
					data : {
						"cid" : cid,
						"copyRightName" : copyRightName,
						"contact" : contact,
						"worksName" : worksName,
						"worksCategory" : worksCategory,
						"price" : price,
						"worksInfo" : worksInfo,
						"auScope" : auScope,
						"auDeadLine" : auDeadLine,
						"termOfValidity" : termOfValidity,
						"agreeFlag" : agreeFlag,
						"copyRightImage" : copyRightImage,
						"mark" : "publishyes"
					},
					contentType : "application/x-www-form-urlencoded; charset=utf-8",
					dataType : 'json',
					success : function(data) {
						if (data.result == 'success') {
							// 成功之后还是不让提交,直接等待跳转。
							//console.log("/cartoon-web/copyRight/toPreviewPage?cid=" + data.cid);
							window.location = "/cartoon-web/copyRight/toPreviewPage?cid=" + data.cid;
						} else if (data.result == "fail") {
							alert(data.msg);
							lock = true;
							$("#publicCopyRight").bind("click",function() {
								submitForm();
							});
						}
					},
					error : function(XMLHttpRequest, textStatus, errorThrown) {
						alert("网络或者其它原因导致的错误!");
						lock = true;
						$("#publicCopyRight").bind("click",function() {
							submitForm();
						});
					}
				});
	}
}

EasyUI中解决表单重复提交(主要看Add):

/*
 * name       :Zuoquan Tu
 * mail       :tuzq@XXXXX.cn
 * date       :2015/06/30
 * version    :1.1
 * description:modified by tuzuoquan 2015/06/30
 * CopyRight (C) 2015-06
 */
var PageHandler = (function($) {
	var isAddedFlag = false;
	return {
		searchClear:function(){
			$("#adPage-form").form("clear");
		},
		submitForm:function() {
			//获取当前页,总页数等信息
			var grid = $("#adPage-datagrid");
			var options = grid.datagrid('getPager').data("pagination").options;
			//表示当前页
			var curr = options.pageNumber;
			//表示总页数
			//var total = options.total;
			//表示每页的大小
			var pageRow = options.pageSize;

			//获得字段信息
			var adPageName = $("#adPage-form #adPageName").textbox("getValue");
			var adPageAddress = $("#adPage-form #adPageAddress").textbox("getValue");

			// 对table进行操作
			$("#adPage-datagrid").datagrid('load', {
				"page" : curr,
				"rows" : pageRow,
				"adPageName" : adPageName,
				"adPageAddress" : adPageAddress
			});
		},
		/**
		 * 添加窗口中的重置按钮
		 */
		clearForm:function() {
			$("#adPage-add-form").form("clear");
		},
		/**
		 * 打开添加UI
		 */
		addUI:function() {
			$("#adPage-add-window").window("open");
		},
		/**
		 * 实现添加功能
		 */
		add:function() {
			var isValid = $("#adPage-add-form").form('validate');
			if(!isValid) {
				$.messager.alert('验证错误提示','对不起,信息格式错误!');
			} else {
				if(PageHandler.isAddedFlag) {
					$.messager.show({
						title : '消息提醒',
						msg : '正在保存,请您耐心等待...',
						timeout : 5000,
						showType : 'slide'
					});
					return;
				}
				if(!PageHandler.isAddedFlag) {
					//获得字段信息
					var adPageName = $("#adPage-add-window #adPageName").textbox("getValue");
					var adPageAddress = $("#adPage-add-window #adPageAddress").textbox("getValue");
					var adFunctionNum = $("#adPage-add-window #adFunctionNum").numberbox("getValue");

					PageHandler.isAddedFlag = true;

					jQuery.ajax({
						type : 'POST',
						url : basePath + "/adPage/createAdPage",
						data : {
							"adPageName" : adPageName,
							"adPageAddress" : adPageAddress,
							"adFunctionNum" : adFunctionNum
						},
						dataType : 'json',
						success : function(data) {
							if(data.result == "success") {
								$("#adPage-add-window").window("close");
								$("#adPage-datagrid").datagrid('reload');

								PageHandler.isAddedFlag = false;
							} else if (data.result == "error") {
								$("#adPage-add-window").window("close");
								$.messager.show({
									title : '消息提示',
									msg : data.msg,
									timeout : 5000,
									showType : 'slide'
								});

								PageHandler.isAddedFlag = false;
							}
						},
						error : function() {
							$.messager.show({
								title : '消息提示',
								msg : '添加失败......',
								timeout : 5000,
								showType : 'slide'
							});

							PageHandler.isAddedFlag = false;
						}
					});
				}
			}
		},
		/**
		 * 修改
		 */
		editUI:function() {
			var row = $("#adPage-datagrid").datagrid('getSelected');
			if (row) {
				var id = row.id;
				$("#adPage-edit-window #id").val(id);
				$("#adPage-edit-window #adPageName").textbox('setValue', row.adPageName);
				$("#adPage-edit-window #adPageAddress").textbox('setValue', row.adPageAddress);
				$("#adPage-edit-window #adFunctionNum").numberbox('setValue', row.adFunctionNum);

				$("#adPage-edit-window").window("open");
			} else {
				$.messager.show({
					title : '消息提示',
					msg : '对不起,没有选中要修改的行......',
					timeout : 5000,
					showType : 'slide'
				});
			}
		},
		edit:function() {
			//1、判断校验是否成功
			var isValid = $("#adPage-edit-window").form('validate');
			//2、如果失败则提示修改失败
			if(!isValid) {
				$.messager.alert('验证错误提示','对不起,信息格式错误!');
			} else {
				//3、如果成功则提交修改
				var id = $("#adPage-edit-window #id").val();
				var adPageName = $("#adPage-edit-window #adPageName").textbox('getValue');
				var adPageAddress = $("#adPage-edit-window #adPageAddress").textbox('getValue');
				var adFunctionNum = $("#adPage-edit-window #adFunctionNum").textbox('getValue');

				jQuery.ajax({
					type : 'POST',
					url : basePath + "/adPage/updateAdPage",
					data : {
						"id":id,
						"adPageName" : adPageName,
						"adPageAddress" : adPageAddress,
						"adFunctionNum" : adFunctionNum
					},
					dataType : 'json',
					success : function(data) {
						if(data.result == "success") {
							$("#adPage-edit-window").window("close");
							$("#adPage-datagrid").datagrid('reload');
						} else if (data.result == "error") {
							$("#adPage-edit-window").window("close");
							$.messager.show({
								title : '消息提示',
								msg : data.msg,
								timeout : 5000,
								showType : 'slide'
							});
						}
					},
					error : function() {
						$.messager.show({
							title : '消息提示',
							msg : '修改失败......',
							timeout : 5000,
							showType : 'slide'
						});
					}
				});
			}
		},
		remove:function() {
			var row = $('#adPage-datagrid').datagrid('getSelected');
			if (row) {
				$.messager.confirm('Confirm',
						'确定删除该用户吗?',
						function(r) {
							if (r) {
								jQuery.ajax({
									type : 'POST',
									url : basePath + "/adPage/updateFlag",
									data : {
										"id" : row.id,
										"flag":0
									},
									dataType : 'json',
									success : function(data) {
										if(data.result == "success") {
											$("#adPage-datagrid").datagrid('reload');
										} else if(data.result == "error") {
											$.messager.show({
												title : '消息提示',
												msg : data.msg,
												timeout : 5000,
												showType : 'slide'
											});
										}

									},
									error : function() {
										$.messager.show({
											title : '消息提示',
											msg : '删除失败......',
											timeout : 5000,
											showType : 'slide'
										});
									}
								});
							}
						});
			}
		}
	}
})(jQuery);

var toolbar = [{
	text:'添加',
	iconCls:'icon-add',
	handler:PageHandler.addUI
},'-',{
	text : '修改',
	iconCls : 'icon-edit',
	handler : PageHandler.editUI
}, '-',{
	text : '删除',
	iconCls : 'icon-remove',
	handler : PageHandler.remove
}];

使用js控制表单重复提交(1加锁,2事件方式,3 EasyUI中解决表单重复提交)的更多相关文章

  1. Struts2中解决表单重复提交

    3. 表单的重复提交问题 1). 什么是表单的重复提交 > 在不刷新表单页面的前提下:  >> 多次点击提交按钮 >> 已经提交成功, 按 "回退" ...

  2. EasyUI中在表单提交之前进行验证

    使用EasyUi我们可以在客户端表单提交之前进行验证,过程如下:只需在onSubmit的时候使用return  $("#form1").form('validate')方法即可,E ...

  3. Android Studio中解决jar包重复依赖导致的代码编译错误

    在原本的代码中已经使用了OKHTTP和rxjava,然后今天依赖retrofit的时候一直报错 Program type already present: okhttp3.internal.ws.Re ...

  4. 用easy-ui中的表单操作实现一行操作和多行操作

    http://blog.sina.com.cn/s/blog_8e50ede90101fff9.html

  5. java web解决表单重复提交问题

    我们大家再进行web开发的时候,必不可少会遇见表单重复提交问题.今天就来给总结如何解决表单提交问题,欢迎大家交流指正. 首先我们在讨论如何解决表单重复提交问题之前先来解决三个问题:1.什么叫表单重复提 ...

  6. MVC中Form表单的提交

    概述 Web页面进行Form表单提交是数据提交的一种,在MVC中Form表单提交到服务器.服务端接受Form表单的方式有多种,如果一个Form有2个submit按钮,那后台如何判断是哪个按钮提交的数据 ...

  7. 第二百二十一节,jQuery EasyUI,Form(表单)组件

    jQuery EasyUI,Form(表单)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Form(表单)组件的使用方法,这个组件不依赖于 ...

  8. JS控制,返回上一页之后强行刷新一次

    网站建设过程中,提交页面后我们经常要用到window.history.go(-1)返回上一页,因为页面的缓存功能,我们只能返回上次操作的页面,但在删除等操作中,我们希望实时看到删除项目后的页面,这就要 ...

  9. 通过jdbc获取数据库中的表结构

    通过jdbc获取数据库中的表结构 主键 各个表字段类型及应用生成实体类   1.JDBC中通过MetaData来获取具体的表的相关信息.可以查询数据库中的有哪些表,表有哪些字段,字段的属性等等.Met ...

随机推荐

  1. hdu 2546 饭卡 删除一个数的01背包

    饭卡 Time Limit: 5000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submissi ...

  2. iOS 开发之照片框架详解(2)

    一. 概况 本文接着 iOS 开发之照片框架详解,侧重介绍在前文中简单介绍过的 PhotoKit 及其与 ALAssetLibrary 的差异,以及如何基于 PhotoKit 与 AlAssetLib ...

  3. lintcode :二叉树的最大深度

    题目: 二叉树的最大深度 给定一个二叉树,找出其最大深度. 二叉树的深度为根节点到最远叶子节点的距离. 样例 给出一棵如下的二叉树: 1 / \ 2 3 / \ 4 5 这个二叉树的最大深度为3. 解 ...

  4. 学习VirtualEnv和Nginx+uwsgi用于django项目部署

    以下叙述中用到的操作系统:Linux CentOS 6.X. 最近几天了解一下VirtualEnv,Apache+Daemon mode,Nginx+uwsgi的概念,并且在项目中实验性部署了一下(目 ...

  5. SQL 事务及实例演示

    简介 事务,英文名称是transaction.是在对数据库进行管理操作过程中一个逻辑单位,由有限的操作序列构成. 其实这个概念很好懂,简单理解就是:事务就是在使用数据库中的一个操作,由一些操作放到一起 ...

  6. ReactiveCocoa基础和一些常见类介绍

    一 导入ReactiveCocoa框架 通常都会使用CocoaPods(用于管理第三方框架的插件)帮助我们导入 podfile如果只描述pod 'ReactiveCocoa', '~> 4.0. ...

  7. iOS enum 定义与使用

    枚举其实很重要,特别是在应用开发初期,服务器端数据格式需要更改得情况下,枚举和宏都能是程序简洁,并且改动小. 网上有个人写的言简意赅,适合初学 转自:http://blog.csdn.net/ysy4 ...

  8. threejs 初识

    用于展示3D动效,就是 跟拍电影一样,需要有3大模块:scene,camera,renderer. scene:场景,用于放置用到的模型. camera:摄像机,拍电影似的,得有个摄像机. rende ...

  9. js的arguments到底是什么?

    类数组对象:arguments 总所周知,js是一门相当灵活的语言.当我们在js中在调用一个函数的时候,我们经常会给这个函数传递一些参数,js把传入到这个函数的全部参数存储在一个叫做arguments ...

  10. 微软已发布 Windows 10 Timeline 功能的官方 Chrome 插件

    微软已发布 Windows 10 Timeline 功能的官方 Chrome 插件,这个插件名为 Web Activities,功能是跨 Windows 10 和 Microsoft Launcher ...