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

 更新时间:2013年04月03日 16:50:45   作者:  
为了避免因某些原因用户同时多次点击按钮,提交重复的请求,我们需要禁用请求提交按钮,接下来与大家一起分享下实现方法
在使用AJAX(jQuery)异步请求数据时,为了避免因某些原因用户同时多次点击按钮,提交重复的请求,我们需要禁用请求提交按钮。

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

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

相关文章

  • Spring MVC+ajax进行信息验证的方法

    Spring MVC+ajax进行信息验证的方法

    AJAX 不是新的编程语言,而是一种使用现有标准的新方法。这篇文章主要介绍了Spring MVC+ajax进行信息验证,需要的朋友可以参考下
    2019-09-09
  • Ajax传递特殊字符的数据如何解决

    Ajax传递特殊字符的数据如何解决

    这篇文章给大家介绍了Ajax传递的数据包含特殊字符时的解决方法,需要的朋友参考下吧
    2017-06-06
  • Ajax中的循环方案

    Ajax中的循环方案

    在开发中,当一个列表页面加载完成后,我需要根据列表每一项的id去服务器端获取对应的数据然后再把获取的数据赋给当前id对应的标签,怎么实现的呢?下面小编给大家介绍下ajax中的循环方案,感兴趣的朋友一起学习吧
    2016-10-10
  • 用AJAX实现页面登陆以及注册用户名验证的简单实例

    用AJAX实现页面登陆以及注册用户名验证的简单实例

    下面小编就为大家带来一篇用AJAX实现页面登陆以及注册用户名验证的简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-10-10
  • AJAX中同时发送多个请求XMLHttpRequest对象处理方法

    AJAX中同时发送多个请求XMLHttpRequest对象处理方法

    AJAX中同时发送多个请求XMLHttpRequest对象处理方法...
    2007-04-04
  • 浅谈AJAX开发技术

    浅谈AJAX开发技术

    本文简单介绍了下ajax的概念历史以及XMLHttpRequest对象的属性、XMLHttpRequest对象的方法和AJAX封装后的代码,十分不错,这里推荐给小伙伴们。
    2015-02-02
  • ajax中用josnp接收josn数据的实现方法

    ajax中用josnp接收josn数据的实现方法

    下面小编就为大家分享一篇ajax中用josnp接收josn数据的实现方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2017-12-12
  • Ajax的简单实用实例代码

    Ajax的简单实用实例代码

    这篇文章主要介绍了Ajax的简单实用实例代码,需要的朋友可以参考下
    2017-05-05
  • prototype试用整理资料

    prototype试用整理资料

    prototype试用整理资料...
    2007-01-01
  • 浅谈Ajax和JavaScript的区别

    浅谈Ajax和JavaScript的区别

    下面小编就为大家带来一篇浅谈Ajax和JavaScript的区别。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-07-07

最新评论