使用Ajax时如何防止重复提交

热门系列：

•   程序人生，精彩抢先看

---

1.前言

以前面试的时候，就被问起过：如何防止表单重复提交。当时刚搞开发，没接触过该类问题，也没想过，所以未能答上来。为什么今天特地来说这个问题，是因为现今的项目开发中接触到了，而且相信很多地方也会需要去处理这个问题，因此趁有时间，记录一番。

---

2.正题

最近项目中做的是客户端页面填写消息之后，发送请求再存入数据库。虽然也可以用form表单来完成，但为了达到页面的局部刷新，我选择的是ajax提交。所以用的是按钮点击事件来完成的。

解决方式：①防止重复提交，不论是表单提交或者是ajax提交，如果通过前端javascript去控制，都有一个最简单的办法，就是在提交后通过控制提交按钮submit为disabled=“disabled”，然后在请求返回后，处理时再取消disabled属性即可，这是一种。

                  ②另一种方式是对于ajax提交时，通过标识来做判断而防止重复提交，如下：

当然，如果函数中有其他校验，请在return之前也记得重置标识，否则后续点击不会再有效果。

---

3.总结

此次只针对ajax防止重复提交作出了两种比较简单的处理方式，相信肯定还有更多其他方法，大家有兴趣的可以深究。此处需要注意的是，之前我想的很简单，以为只需要每次提交请求后，将填写项内容清空，然后通过校验去处理，这样来防止重复提交。但因为ajax为异步请求处理，点击几次就会提交几次请求，而后台处理请求也是需要时间的，所以在处理的时间段内多次提交请求会导致数据重复甚至存储数据出现脏数据。个人实践后的反思，提出来希望能有所借鉴。

 

 

本博客皆为学习、分享、探讨为本，欢迎各位朋友评论、点赞、收藏、关注，一起加油！