AJAX避免用户重复提交请求实现方案

在使用AJAX(jQuery)异步请求数据时,为了避免因某些原因用户同时多次点击按钮,提交重复的请求,我们需要禁用请求提交按钮。

重点:jQuery的 attr 和 removeAttr 两个函数,主要是元素button的disabled属性。

Demo:

复制代码 代码如下:

<body>

<a class="disabled">Button disabeld</a>    <a class="abled">Button abled</a><br/><br/>

<input type="button" id="submit" name="submit" value="submit">

</body>

<script type="text/javascript" src="../jquery-1.2.6.js"></script>

<script type="text/javascript">

$(function(){

//使其失效

$(".disabled").click(function(){

$("#submit").attr("disabled","disabled");

$("#submit").val('disabled...');

});

//激活

$(".abled").click(function(){

$("#submit").removeAttr("disabled");

$("#submit").val('submit');

});

//操作请求

$("#submit").click(function() {

$("#submit").attr("disabled", "disabled");

alert("hi");//send ajax request

$("#submit").removeAttr("disabled");

});

});

</script>

说明:当点击"Button disabeld"后,使用 $( "#submit" ).attr("disabled","disabled") 语句禁用测试按钮,实质是给测试按钮增加一个disabled属性,然后点击"Button abled"或执行发送ajax()请求,当请求完全后,使用 $("#submit").removeAttr("disabled"); 语句去除禁用按钮属性,从而实现了禁用按钮,避免重复发送请求。

时间: 2024-10-01 12:00:23

AJAX避免用户重复提交请求实现方案的相关文章

AJAX避免用户重复提交请求实现方案_AJAX相关

在使用AJAX(jQuery)异步请求数据时,为了避免因某些原因用户同时多次点击按钮,提交重复的请求,我们需要禁用请求提交按钮. 重点:jQuery的 attr 和 removeAttr 两个函数,主要是元素button的disabled属性. Demo: 复制代码 代码如下: <body> <a class="disabled">Button disabeld</a>    <a class="abled">Butt

注册或者点击按钮时,怎么防止用户重复提交数据

 这篇文章主要是对注册或者点击按钮时,怎么防止用户重复提交数据进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助 asp.net实现点击按钮后设按钮不可用并提交  代码如下: <asp:Button ID="Button1" runat="server" Text="123456" OnClientClick="this.disabled=true;this.form.submit(); "  UseSubmitB

PHP防止用户重复提交表单

我们提交表单的时候,不能忽视的一个限制是防止用户重复提交表单,因为有可能用户连续点击了提交按钮或者是攻击者恶意提交数据,那么我们在提交数据后的处理如修改或添加数据到数据库时就会惹上麻烦. 那么如何规避这中重复提交表单的现象出现呢?我们可以从很多方面入手: 首先从前端做限制.前端JavaScript在按钮被点击一次后禁用,即disabled,这个方法简单的防止了多次点击提交按钮,但是缺点是如果用户禁用了javascript脚本则失效. 第二,我们可以在提交后做redirect页面重定向,即提交后跳

网络- HttpURLConnection重复提交请求

问题描述 HttpURLConnection重复提交请求 各位大神 我就剩下50 GB 了 求解 . HttpURLConnection 请求数据超时了以后,会重复提交一下上次提交的网络数据! 不知道为什么 球大神帮忙解决.代码如图: 解决方案 看代码中是否有重试机制,是否捕获错误后,有进行处理 解决方案二: java WEB 控制重复提交请求 解决方案三: 代码都贴不完整...应该是在catch代码块里面有再执行的处理吧.

php防止用户重复提交表单_php技巧

我们提交表单的时候,不能忽视的一个限制是防止用户重复提交表单,因为有可能用户连续点击了提交按钮或者是攻击者恶意提交数据,那么我们在提交数据后的处理如修改或添加数据到数据库时就会惹上麻烦. 效果图:   那么如何规避这中重复提交表单的现象出现呢?我们可以从很多方面入手: 首先从前端做限制.前端JavaScript在按钮被点击一次后禁用,即disabled,这个方法简单的防止了多次点击提交按钮,但是缺点是如果用户禁用了javascript脚本则失效. 第二,我们可以在提交后做redirect页面重定

jquery重复提交请求的原因浅析_jquery

一般来说有两个原因: 1.第一种是没有取消绑定,例如$("#test").unbind("click");$("#test").click(function(){....}); 2.是因为在不同的页面多次引用同一个js文件,这样也有可能会造成重复提交请求.

如何防止用户重复提交数据

数据|重复|重复提交 这篇文章从语法上看,原作者应该是从什么地方翻译过来的. 简单的解决方案:最简单的方式就是当用户提交之后,在你的服务器端控件的代码中使用Response.Redirect("selfPage")语句.但是大多的数包括我都不使用这种方法. 多次提交:请注意:这篇文章并不是有关如何防止在一个页面中多次提交.这篇文章是教你在提交了请求之后如何防止页面进行刷新.情况是这样的,当用户提交了按钮之后,最终用户就不能再点击提交按钮了.但是这样最终用户仍然可以通过点击浏览器的刷新按

JSP避免Form重复提交三种方案

js|重复|重复提交 1 javascript ,设置一个变量,只允许提交一次. <script language="javascript">var checkSubmitFlg = false;function checkSubmit() {if (checkSubmitFlg == true) {return false;}checkSubmitFlg = true;return true;}document.ondblclick = function docondbl

防止用户重复提交数据方法总结

php cookie处理方法 如果数据通过了上边的两次验证,说明数据是合法有效的数据.这时候我们把提交的数据串接为一个字符串,并用MD5加密后得到一个MD5的值,接着我们把这个值通过Cookie放进客户端,当用户下一次提交表单的时候我们就重新操作这一步,并且读出Cookie中的MD5值,进行比较,如果相同就可断定用户提交两次提交的表单是相同的,否则替换这个Cookie!  代码如下 复制代码 <?php $value = $_COOKIE["value"]; //读取上一次设置的