asp.net表单提交时防重复提交并执行前台的JS验证

在项目开发中，遇到这样的一个情况，就是用户重复提交。当然这个不能怪用户，只能怪.NET或者服务器反应迟钝......我是这样理解的。
在网上搜了一下，解决方案是不少，比如：
http://bbs.csdn.net/topics/340048988
（这个大家提了不少建议）
http://www.cnblogs.com/blsong/archive/2009/12/24/1631144.html
（这个基本上总结了网上的方法）
但实际上做互联网web项目中，需要在前台执行JS或者Jquery的验证（主要是增强用户体验），那么再使用上面的方法，就会出现问题。要么重复提交依然存在，要么前台JS验证失效。最后没办法，只有自己写一个，在满足阻止用户重复提交的情况下，还能保证前台JS验证有效。代码如下：


代码如下:

//按钮注册加载样式事件
var ItSelfButton;
var ControlRegPostResult = true;
function AddInputClick() {
$("input[type='submit']").click(function () {
ItSelfButton = $(this);
if (ItSelfButton.attr("repeat") == null) {
var btnDiv = $("<div>");
btnDiv.attr("id", "Mask_BTN");
var divimg = $("<img>");
divimg.attr("alt", "加载中...");
divimg.attr("src", "/Images/ButtonLoading.gif");
divimg.css({ "margin-left": ($(this).width() - 4) / 2, "margin-top": ($(this).height() - 16) / 2 });
btnDiv.append(divimg);
btnDiv.css({ width: $(this).width() + 12 + "px", height: $(this).height() + "px", top: $(this).offset().top + "px", left: $(this).offset().left + "px", position: "absolute" });
$(document.body).append(btnDiv);
setTimeout(MaskTimeOutRemove, 200);
}
});
}
$(function () {
AddInputClick();
});
$(window).resize(function () {
if (ItSelfButton != null) {
$("#Mask_BTN").css({ top: ItSelfButton.offset().top + "px", left: ItSelfButton.offset().left + "px" });
}
});
function MaskRemove() {
$("#Mask_BTN").remove();
}
function MaskTimeOutRemove() {
if (!ControlRegPostResult) {
$("#Mask_BTN").remove();
ControlRegPostResult = true;
}
}

其中在JS 验证失败中将


代码如下:

ControlRegPostResult = false;

这样基本上满足我的目的了。
ButtonLoading.gif 可以是一个打转的图片 ，也可以和按钮一样大。反正目的是这个层把按钮遮住。

赞 (0)

相关推荐

  • ASP.NET中为GridView添加删除提示框的方法

    本文实例讲述了ASP.NET中为GridView添加删除提示框的方法.分享给大家供大家参考.具体分析如下: 在GridView中我们可以直接添加一个CommandField删除列来删除某行信息.但为了避免误操作引起的误删除,在删除操作者让操作者再确认下,完后再进行删除. 首先我们给我们的GridView 添加一个模板列,如下: 以下是引用片段: <ASP:TemplateField HeaderText="Delete" ShowHeader="False"&

  • asp.net 处理F5刷新页面重复提交页面的一个思路

    当提交完一个页面后,如果我们再次点击F5刷新该页面的话,会弹出一个提示,提示我们如果继续,则会重新发送提交我们刚才提交的内容,要是类似付款或一次性的操作,我们不应该这样操作,否则会造成重复提交的问题.解决这个问题,我们可以通过如下思路来处理: 1. 提交成功后,将一个成功状态存入session中,然后重新载入该页面. 2. 在page_load方法中,判定该session字段的状态值,如果为成功,则显示成功信息,否则显示错误提示,紧跟着通过Session.Remove()方法来清空该缓存即可.

  • Asp.Net防止刷新重复提交数据的办法

    在网上搜 一下,可以找到很多关于这方面的资料,其中有一篇是来自MSDN上的一种解决方法: http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnvs05/html/BedrockASPNET.asp 它是通过重新定义 System.Web.UI.Page 类来实现加载页面时,是"刷新"."后退"请求,还是正常请求,其他的页面则继承了自定义的这 个Page类.感觉他这个方法比较独特,有例子

  • Asp.Net中避免重复提交和弹出提示框的实例代码

    前台代码: <asp:Button ID="Button1" runat="server" Text="打印" onclick="Button1_Click" OnClientClick="this.value='数据提交中--';this.disabled=true;" UseSubmitBehavior="False" /> 后台代码: public partial cl

  • asp.net防止刷新时重复提交(可禁用工具条刷新按钮)

    前段时间遇到了需要禁用刷新的需求,f5按钮就不说了,简单的js就能把它禁用,但是工具条上的刷新按钮却傻傻干不掉. 如果简单的在刷新时重新加载画面,通过window.location.href="url"可以很容易的实现,但是需求是要求在刷新时什么都不做,保留画面的状态,这下子可就复杂化了. asp.net中分辨请求是重新请求还是通过刷新按钮再次请求不是很方便,为了实现这个效果,试过了很多的方式,一下面的两种为例 1. 复制代码 代码如下: private bool pageRefres

  • asp.net 防止用户通过后退按钮重复提交表单

    防止用户通过后退按钮重复提交表单 <% response.Buffer=true response.Expires=0 response.ExpiresAbsolute=now()-1 response.CacheControl="no-cache" %> response.Buffer=true的意思就是指明输出页面是否被缓冲,当属性值为True时,服务器将不会向客户端发送任何信息,直到所有程序执行完或者遇到 <% Response.Flush %>或<

  • asp.net表单提交时防重复提交并执行前台的JS验证

    在项目开发中,遇到这样的一个情况,就是用户重复提交.当然这个不能怪用户,只能怪.NET或者服务器反应迟钝......我是这样理解的. 在网上搜了一下,解决方案是不少,比如: http://bbs.csdn.net/topics/340048988 (这个大家提了不少建议) http://www.cnblogs.com/blsong/archive/2009/12/24/1631144.html (这个基本上总结了网上的方法) 但实际上做互联网web项目中,需要在前台执行JS或者Jquery的验证

  • php表单加入Token防止重复提交的方法分析

    php表单加入Token防止重复提交的方法分析

    本文实例讲述了php表单加入Token防止重复提交的方法.分享给大家供大家参考,具体如下: Token浅谈 Token,就是令牌,最大的特点就是随机性,不可预测.一般黑客或软件无法猜测出来. 那么,Token有什么作用?又是什么原理呢? Token一般用在两个地方--防止表单重复提交.anti csrf攻击(跨站点请求伪造). 两者在原理上都是通过session token来实现的.当客户端请求页面时,服务器会生成一个随机数Token,并且将Token放置到session当中,然后将Token发

  • 浅谈C#在网络波动时防重复提交的方法

    前几天,公司数据库出现了两条相同的数据,而且时间相同(毫秒也相同).排查原因,发现是网络波动造成了重复提交. 由于网络波动而重复提交的例子也比较多: 网络上,防重复提交的方法也很多,使用redis锁,代码层面使用lock. 但是,我没有发现一个符合我心意的解决方案.因为网上的解决方案,第一次提交返回成功,第二次提交返回失败.由于两次返回信息不一致,一次成功一次失败,我们不确定客户端是以哪个返回信息为准,虽然我们希望客户端以第一次返回成功的信息为准,但客户端也可能以第二次失败信息运行,这是一个不确

  • SpringBoot基于redis自定义注解实现后端接口防重复提交校验

    SpringBoot基于redis自定义注解实现后端接口防重复提交校验

    目录 一.添加依赖 二.代码实现 三.测试 一.添加依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-redis</artifactId> <version>1.4.4.RELEASE</version> </dependency> <dependency> <

  • SpringBoot+Redis实现后端接口防重复提交校验的示例

    SpringBoot+Redis实现后端接口防重复提交校验的示例

    目录 1 Maven依赖 2 RepeatedlyRequestWrapper 3 RepeatableFilter 4 RepeatSubmit 5 RepeatSubmitInterceptor 6 RepeatSubmitConfig 7 RepeatSubmitController 1 Maven依赖 <!--redis缓存--> <dependency> <groupId>org.springframework.boot</groupId> <

  • Java结合redis实现接口防重复提交

    redis 接口防重 技术点:redis/aop 说明: 简易版本实现防止重复提交,适用范围为所有接口适用,采用注解方式,在需要防重的接口上使用注解,可以设置防重时效. 场景: 在系统中,经常会有一些接口会莫名其妙的被调用两次,可能在幂等接口中不会存在太大的问题,但是非幂等接口的处理就会导致出现脏数据,甚至影响系统的正确性. 选型参考: 在常见的防重处理分为多种,粗分为前端处理,后端处理 前端处理分为: 在按钮触发后便将按钮置灰,设置为不可用,在接口调用成功后回调处理,将按钮恢复 发送请求时,设

  • jquery项目中如何防重复提交详解

    jquery项目中如何防重复提交详解

    在新项目中,axios能实现防重复提交的功能,不过老项目(例如jQuery)的项目中,没有axios.但是导入Ajax-hook 就可以实现 Ajax-hook源码地址 : https://github.com/wendux/Ajax-hook 导入 <script src="https://unpkg.com/ajax-hook@2.0.3/dist/ajaxhook.min.js"></script> ah对象是在导入ajaxhook.min.js后就会出现

  • 解决vue表单为空也能提交的问题

    解决vue表单为空也能提交的问题

    目录 vue表单为空也能提交 大概是这样写的 vue的表单提交方式 vue表单收集和提交 vue表单为空也能提交 今天在用Vue写表单验证的时候,习惯性把v-model绑定的值设置为null,然后再测试的时候,发现如果填写了表单后,又删除输入的内容,竟然能提交上去,百思不得其解. 最后通过vue devtools这个工具找到了问题所在. 大概是这样写的 <input v-model="ipt"  /> data () {     return {         ipt:

  • jQuery实现form表单基于ajax无刷新提交方法详解

    本文实例讲述了jQuery实现form表单基于ajax无刷新提交方法.分享给大家供大家参考,具体如下: 首先,新建Login.html页面: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.o

  • jquery实现表单输入时提示文字滑动向上效果

    jquery实现表单输入时提示文字滑动向上效果

    本文实例讲述了jquery实现表单输入时提示文字滑动向上效果.分享给大家供大家参考.具体如下: 这里基于jQuery实现的表单输入框提示效果,当不输入的时候,提示文字就显示在输入框中,当鼠标点击文本框要输入文字的时候,提示文字向滑出输入框,好像很个性也很智能的样子,用户体验比较不错,运用了CSS3的部分属性,因此在测试时,请尽量要用高版本的IE9或chrome和火狐等网页浏览器. 运行效果截图如下: 具体代码如下: <!doctype html> <html> <head&g

随机推荐