最近的维护公司的一个代理商平台的时候,客服人员一直反映说的统计信息的时候有重复数据,平台一直都很正常,这个功能是最近新进的一个实习生同事写的功能,然后就排查问题人所在,发现新的这个模块的AJAX提交数据的时候没有设置防重复提交限制,所以今天把这个问题记录下来供AJAX新手童鞋学习,也防止以后再出现这样的问题。

ajax诠释

ajax 的全称是Asynchronous JavaScript and XML,其中,Asynchronous 是异步的意思,它有别于传统web开发中采用的同步的方式。

ajax所包含的技术

大家都知道ajax并非一种新的技术,而是几种原有技术的结合体。它由下列技术组合而成。

1.使用CSS和XHTML来表示。

2. 使用DOM模型来交互和动态显示。

3.使用XMLHttpRequest来和服务器进行异步通信。

4.使用javascript来绑定和调用。

在上面几中技术中,除了XmlHttpRequest对象以外,其它所有的技术都是基于web标准并且已经得到了广泛使用的,XMLHttpRequest虽然目前还没有被W3C所采纳,但是它已经是一个事实的标准,因为目前几乎所有的主流浏览器都支持它。

ajax原理和XmlHttpRequest对象

Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据,然后用javascript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据。

有了上面的知识普及,相信大家对AJAX也有了比较深入的了解了,下面来学习下造成的原因和解决方案

一、造成重复提交原因

由于AJAX提交数据为异步提交,所以当我们点击提交按钮是通过xmlhttprequest向服务器发送异步请求,发送请求需要有处理时间,我们第一次点击的请求尚未完成,就有接二连三的又提交了几次,同时后来发送的请求同事也被发送到后台处理了,这种情况如果是数据读取则不会有太大影响,但是涉及到数据提交保存或者提交之后多表数据处理就更麻烦了,所以此种情况务必要避免,免得给大家造成麻烦。

二、重复提交解决办法

1、如果提交对象为按钮的话,可以对按钮设置disabled,此办法适应于按钮提交,此种方法简单粗暴,也是很多人用的办法,代如下:

$("input[type=submit]").attr('disabled',true)//在按钮提交之后和AJAX提交之前将按钮设置为禁用

$.ajax({

url:'/post.php'

data:{a:1,b,1}

success:function(){

$("input[type=submit]").attr('disabled',false)//在提交成功之后重新启用该按钮

},

error: function(){

$("input[type=submit]").attr('disabled',false)//即使AJAX失败也需要将按钮设置为可用状态,因为有可能是网络问题导致的失败,所以需要将按钮设置为可用

}

})

经过以上对按钮的处理就避免了重复提交的问题

2、非按钮对象提交

有时候我们在提交数据的时候没有from,只有单个表单组件(input、textarea、radio、checkbox等),所以我们就可以将任何一个对象设置提交对象来完成提交,由于普通对象没有disabled属性,所以我们需要用其它方式来防止重复提交

var post_flag = false; //设置一个对象来控制是否进入AJAX过程

function post(){

if(post_flag) return; //如果正在提交则直接返回,停止执行

post_flag = true;//标记当前状态为正在提交状态

$.ajax({//进入AJAX提交过程

url:'/post.php'

data:{a:1,b,1}

success:function(){

post_flag =false; //在提交成功之后将标志标记为可提交状态

},

error: function(){

post_flag =false; //AJAX失败也需要将标志标记为可提交状态

}

})

}

有了上面的方法,大部分执行重复异步请求的问题都会解决,办法已经教给大家了,希望对新手童鞋有帮助。

AJAX防重复提交的办法总结的更多相关文章

  1. SpringMVC后台token防重复提交解决方案

    本文介绍如何使用token来防止前端重复提交的问题. 目录 1.思路 2.拦截器源码实现 3.注解源码 4.拦截器的配置 5.使用指南 6.结语 思路 1.添加拦截器,拦截需要防重复提交的请求 2.通 ...

  2. (亿级流量)分布式防重复提交token设计

    大型互联网项目中,很多流量都达到亿级.同一时间很多的人在使用,而每个用户提交表单的时候都可能会出现重复点击的情况,此时如果不做好控制,那么系统将会产生很多的数据重复的问题.怎样去设计一个高可用的防重复 ...

  3. (九)Struts2 防重复提交

    所有的学习我们必须先搭建好Struts2的环境(1.导入对应的jar包,2.web.xml,3.struts.xml) 第一节:重复提交示例演示 struts.xml <?xml version ...

  4. ajax防止重复提交请求1

    ajax防止重复提交请求 A. 独占型提交 只允许同时存在一次提交操作,并且直到本次提交完成才能进行下一次提交. module.submit = function() {   if (this.pro ...

  5. 浅谈C#在网络波动时防重复提交

    前几天,公司数据库出现了两条相同的数据,而且时间相同(毫秒也相同).排查原因,发现是网络波动造成了重复提交. 由于网络波动而重复提交的例子也比较多: 网络上,防重复提交的方法也很多,使用redis锁, ...

  6. Spring MVC表单防重复提交

    利用Spring MVC的过滤器及token传递验证来实现表单防重复提交. 创建注解 @Target(ElementType.METHOD) @Retention(RetentionPolicy.RU ...

  7. struts2学习(15)struts2防重复提交

    一.重复提交的例子: 模拟一种情况,存在延时啊,系统比较繁忙啊啥的. 模拟延迟5s钟,用户点了一次提交,又点了一次提交,例子中模拟这种情况: 这样会造成重复提交:   com.cy.action.St ...

  8. JavaWeb -- Struts2,对比, 简单表单提交,校验,防重复提交, 文件上传

    Struts2核心流程图 1. Struts2 和 Struts1 对比 struts1:基于Servlet(ActionServlet),actionForm众多(类的爆炸),action单例(数据 ...

  9. struts2-token防止重复提交解决办法

    1.配置struts.xml全局防重复提交拦截器栈: <struts> <package name="module" extends="struts-d ...

随机推荐

  1. FileBeat

    FileBeat使用说明 FileBeat是一个日志收集器,基于Logstash-Forwarder的源代码.FileBeat一般以代理的身份运行在客户端服务器中,并监视用户指定的目录.文件,同时把日 ...

  2. 关于《Cocos2d-x建工程时避免copy文件夹和库》的更新

    在前几篇博文中大概了解了Cocos2d-x引擎的基本结构后打算开始实际操作,便在网上转载了一篇关于VS新建Cocos2d-x项目的文章.今天实际操作的时候发现博主使用的引擎版本和我的不一致(<C ...

  3. python selenium初入

    ubuntu python3.4 1.安装selenium, pip 安装 pip install selenium 2.selenium版本2.53.x 试过从官网下载的selenium3,但是fi ...

  4. php 去掉 头尾 空格 2种方法

    看似很简单的问题,其实还是有点坑的,首先这里 空格转义,不是字符串,直接用trim()是去不掉. 1,用preg_replace替换 $test = " dfadad 论责民与三英的关系77 ...

  5. 符号三角形(hdu 2510 搜索+打表)

    符号三角形 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submi ...

  6. MVC4商城项目三:分部视图在导航条上的应用

    写了几天发觉大部分时间用在JS上了,本来想写个musicstore,却加了框架,然后又想用后台,然后又想用上bootstrapt,然后又想弄权限设计,然后又想………… 看来是想多了~ 好吧,最近把后台 ...

  7. soap和http(转)

    http:是一个客户端和服务器端请求和应答的标准(TCP).http协议其目的是为了提供一种发布和接收http页面的方法 一 http协议的客户端与服务器的交互:由HTTP客户端发起一个请求,建立一个 ...

  8. STM32工程中出现 error: A1163E: Unknown opcode R0, , expecting opcode or Macro错误分析及处理

    最近测试以前的一个程序,一般都是打开以前写的程序修改参数直接测试 但是发现以前的编译后出现错误. 奇怪了,以前的出现都是调试好了的啊,一般都是没有错误的,迅速找问题 跳转到错误代码行 代码区域 Hea ...

  9. RESTful 架构

    越来越多的人开始意识到,网站即软件,而且是一种新型的软件. 这种"互联网软件"采用客户端/服务器模式,建立在分布式体系上,通过互联网通信,具有高延时(high latency).高 ...

  10. arm linux中添加开机启动

    微处理器:S5PV210操作系统:linux3.0.8 前言:    在产品中,基本上都要屏蔽arm开发板中linux系统的对外通信,只应该通过产品的相关APP做相关操作.    因此需要把该APP添 ...