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

国术品格教育

国术品格教育

2016-02-19 09:44

今天图老师小编给大家展示的是AJAX避免用户重复提交请求实现方案,精心挑选的内容希望大家多多支持、多多分享,喜欢就赶紧get哦!
在使用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"); 语句去除禁用按钮属性,从而实现了禁用按钮,避免重复发送请求。
展开更多 50%)
分享

猜你喜欢

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

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

AJAX 请求实例

Web开发
AJAX 请求实例

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

AJAX教程(8):AJAX 请求实例

Web开发
AJAX教程(8):AJAX 请求实例

JSP(Struts)避免Form重复提交的几种方案

Web开发
JSP(Struts)避免Form重复提交的几种方案

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

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

Java JAVA基础
JSP避免Form重复提交的三种方案

JavaScript中避免Form重复提交的两种方案

Web开发
JavaScript中避免Form重复提交的两种方案

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

BBS(php & mysql)完整版(一)

BBS(php & mysql)完整版(一)

win10怎么关闭IE浏览器

win10怎么关闭IE浏览器
下拉加载更多内容 ↓