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

2016-02-19 09:44 27 1 收藏

今天图老师小编给大家展示的是AJAX避免用户重复提交请求实现方案,精心挑选的内容希望大家多多支持、多多分享,喜欢就赶紧get哦!

【 tulaoshi.com - Web开发 】

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

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

body
a class="disabled"Button disabeld/a    a class="abled"Button abled/abr/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"); 语句去除禁用按钮属性,从而实现了禁用按钮,避免重复发送请求。

来源:https://www.tulaoshi.com/n/20160219/1591915.html

延伸阅读
标签: Web开发
代码如下: /**//* 异步请求类 作者:吾非无心 创建时间:2009.2 --------------------------------------------------------------------------------------------------------------------------------- 修改记录: 2009.4.27——添加 URL 检测功能,如果是“http://xxxx.xxx.xx.xx/..”这样的格式,使用系统提供的“/getUrl.aspx...
标签: Web开发
script     //设一个变量     var XMLHttpReq=false;    //创建一个XMLHttpRequest对象    function createXMLHttpRequest(){      if(window.XMLHttpRequest){ //Mozilla       XMLHttpReq=new XMLHttpReques...
标签: Web开发
代码如下: /* 防止ajax重复请求的GET和POST方法 */ jQuery.extend({ getx:function(url,data,callback,sender){ var params={url:url,data:null,callback:null,sender:null}; for(var i=1;iarguments.length;i++){ if(arguments[i]!=null){ var ptype=typeof(arguments[i]); if(ptype=="function"){ params.callback=arguments[i];...
标签: Web开发
•多个ajax请求同时发送,相互无依赖。 •多个ajax请求相互依赖,必须有先后顺序。 •多个请求被同时发送,只需要最后一个请求。 第1种case 应用场景: 这个场景很多,一个页面打开是多个区域同时请求后台得到各自的数据,没依赖,没顺序。 处理方案: 直接用jquery的ajax函数。这个用的非常多,这里从略,可看后面的代码中...
标签: Web开发
看了网上的,有几种方法: 1 在你的表单页里HEAD区加入这段代码: 代码如下: META HTTP-EQUIV="pragma" CONTENT="no-cache" META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate" META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT" 2 生成一个令牌保存在用户session中,在form中加一个hidden域,...

经验教程

426

收藏

89
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部