解决因为网络或其他原因多次提交表单

最新推荐文章于 2023-01-17 15:35:21 发布
最新推荐文章于 2023-01-17 15:35:21 发布
阅读量384 收藏
点赞数
分类专栏： vue.js element_ui 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38181746/article/details/119213684
版权

解决表单的多次提交

在项目开发中会遇到提交表单，但是因为网络原因或者因为用户习惯多次点击按钮，而造成表单多次提交，如何解决

解决思路

首先我的思路是，表单提交的时候控制按钮的点击，只让按钮每次请求的时候就让点击一次，然后就禁止点击，请求完成后才可以再次点击，所以我是用的是disabled来禁用按钮。

解决方法

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

旧巷幽草{香
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
浅谈C#在网络波动时防重复提交的方法
08-26
主要介绍了浅谈C#在网络波动时防重复提交的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
宝塔 Nginx免费防火墙 post 参数太多POST传递的参数数量超过800,拒绝访问,如有误报请点击误报
php菜鸟技术天地
12-09 4075
错误：参数太多POST传递的参数数量超过800,拒绝访问,如有误报请点击误报 原因：表单参数超过800个参数了： max_input_vars默认为1000个，于是改成了10000,记录一下
浏览器并发请求数以及解决办法
xzhlg57656的博客
01-17 9330
页面卡顿，需要好长一段时间才能加载完成，除了优化本身，还需要注意浏览器的并发数...
一个 TCP 连接可以发多少个 HTTP 请求，可以同时发送多个HTTP请求么？
jiet07的博客
08-30 3712
文章目录HTTP基础知识五个问题第一个问题第二个问题第三个问题第四个问题第五个问题other参考资料 一道经典的面试题目： 从 URL 在浏览器被被输入到页面展现的过程中发生了什么？ 上面问题，或多或少可以回答出来，但是 如果继续问：收到的 HTML 如果包含几十个图片标签，这些图片是以什么方式、什么顺序、建立了多少连接、使用什么协议被下载下来的呢？ HTTP基础知识 http1.0：单工。因为是短连接，客户端发起请求之后，服务端处理完请求并收到客户端的响应后即断开连接。 http1.1 是半双工,建立长
浏览器同域名请求的最大并发数限制
顺其自然~专栏
12-20 5163
当我们在浏览网页的时候，对浏览速度有一个重要的影响因素，就是浏览器的并发数量。并发数量简单通俗的讲就是，当浏览器网页的时候同时工作的线程数量。如果同时只有2个并发连接数数量，那网页打开的时候只能依赖于这2条线程，前面如果有打开慢的内容，就会直接影响到后面的内容打开。但是如果同时有更多的并发连接数，这样就会大大的提高网页加载速度。详情可查看我们之前发布的文章：并发连接数对浏览器加载速度的测试。浏览器的并发连接数也并非越大越好。下表概括了基于主机上运行的IE浏览器的版本的最大并发连接数、主机的连接速度和服务器的
如何避免因网络延迟引起的表单重复提交
IT成长记
03-13 1331
一、前端解决办法 按钮提交后隐藏活不可点击（不推荐，如果绕过前端使用如postman等工具依然可能出现表单重复提交） 二、数据库解决办法 给提交的某个值设置唯一索引，重复提交就会抛出异常，可以将异常返回给前端（不推荐，太粗暴了） 三、后端解决办法 3.1 前后端不分离解决办法 在后端接收到请求后，在对数据进行处理后，再进行重定向 使用token 服务器在返回表单页面时，生成一个token保存于session，并把该token传给表单页面。当表单提交时会带上token，使用拦截器拦截表单提交请
阻止表单提交按钮多次提交的完美解决方法
11-22
另外，在提交事件发出后，最好将提交按钮设置为disabled，防止由于网络延时问题，让用户有机会进行多次点击重复提交。 onclick事件里面执行 $(this).attr(‘disabled’,’disabled’); 在点击一次后立马将按钮设置为...
JS和jQuery使用submit方法无法提交表单的原因分析及解决办法
11-26
昨天，在做一个表单异步提交内容的时候，遇到很奇怪的问题，submit()方法无法进行提交，每次提交都是把 当前给刷新了，网络抓包发现，每次都是 get方式去获取 当前页面，完全没有post 请求，想着以前 遇上这样的问题...
js和jq使用submit方法无法提交表单的快速解决方法
01-19
昨天，在做一个表单异步提交内容的时候，遇到很奇怪的问题，submit()方法无法进行提交，每次提交都是把 当前给刷新了，网络抓包发现，每次都是 get方式去获取 当前页面，完全没有post 请求，想着以前 遇上这样的问题...
修改禁止多次重复提交
07-31
如何修改禁止多次重复提交
东旭网络问卷调查系统
12-11
1、解决问卷统计中，查看“其他”选项的具体内容出错的情况。 2、根据个别用户需要，增加为每个选项添加图片的功能。 3、修正编辑题目后，数据库没改结果个数的问题 4、解决问卷访问统计不准确 5、修正了问题选项...
浅谈C#在网络波动时防重复提交
weixin_30827565的博客
04-13 259
前几天，公司数据库出现了两条相同的数据，而且时间相同（毫秒也相同）。排查原因，发现是网络波动造成了重复提交。 由于网络波动而重复提交的例子也比较多： 网络上，防重复提交的方法也很多，使用redis锁，代码层面使用lock。 但是，我没有发现一个符合我心意的解决方案。因为网上的解决方案，第一次提交返回成功，第二次提交返回失败。由于两次返回信息...
Vue中因为网速过慢导致表单重复提交问题
11-15 691
网速过慢的话，就会导致表单校验里面的名称是否重复的接口调用过慢，然后如果把loadig写到校验里面，就会导致点击一次后，按钮仍然可以点击，然后用户再次点击，就会重复提交表单，然后创建两次一模一样的内容。所以就需要进行上面的改造。
用户手抖，连续点了两次？优雅解决表单重复提交
weixin_47987440的博客
07-11 1883
在项目中，用户在操作某些重要操作时，经常会出现手抖，导致重复提交，该怎么处理呢？ 我的答案是交给前端，用户提交的时候禁用按钮，等接口返回后再启用。 哈哈，开个玩笑，今天给大家示范一下后端如何处理。 首先通常我们为何要避免表单重复提交？这其实跟接口幂等有关，既然说到这里，那么我们就来回顾一下什么是接口幂等吧！ 一个接口多次调用而没有副作用，那么我们称之为接口幂等。所谓没有副作用简单来讲就是一个接口被执行多次数据不会乱。每次返回的结果都一致。 基
Axios 如何取消重复请求？
song854601134的博客
11-24 1139
文章目录Axios 如何取消重复请求？一、如何取消请求二、如何判断重复请求三、如何取消重复请求3.1 定义辅助函数设置请求拦截器设置响应拦截器四、CancelToken 的工作原理 Axios 如何取消重复请求？ ​ 在 Web 项目开发过程中，我们经常会遇到重复请求的场景，如果系统不对重复的请求进行处理，则可能会导致系统出现各种问题。比如重复的 post 请求可能会导致服务端产生两笔记录。那么重复请求是如何产生的呢？这里我们举 2 个常见的场景： 假设页面中有一个按钮，用户点击按钮后会发起一个 AJAX
vue+element-ui如何防止弹窗表单重复提交 button按钮设为不可用仍可调用点击事件
weixin_45120283的博客
04-15 1632
vue+element-ui如何防止弹窗表单重复提交 button按钮设为不可用仍可调用点击事件表单重复提交原因解决方案错误方案正确方案总结 表单重复提交原因 当弹出dialog内容是需要提交的表单时，点击提交按钮，由于请求响应时间较长或网速原因导致用户多次点击提交按钮而导致表单重复提交。 解决方案 网上解决方案主要有几种： 1、通过JS屏蔽提交按钮。 2、给数据库增加唯一键约束。 3、利用Session防止表单重复提交。 4、… 本文主要讲述通过JS控制提交按钮可用性来控制用户操作，尽管此
关于vue中axios防止重复提交的办法
热门推荐
萧萧的博客
12-04 1万+
vue+axios是大家常用的一个套路，但是在使用过程中难免会有很多问题，这篇文章只是单纯的从侧面解决重复提交的。 网上很多大佬都分享的方法 两段代码放在axios的配置文件中，貌似就可以的，但是小编测试还是会有问题，当你的提交数据量过小，还是会多次提交给后台，参数多条数据，为此小编苦恼好久，后面想到一个过渡的办法，也就是在调取接口的时候，增加loading效果（蒙层） load...
如何防止重复提交
zjt921586518的专栏
04-19 325
转载如何防止重复提交 一、有很多的应用场景都会遇到重复提交问题，比如： 1、点击提交按钮两次。 2、点击刷新按钮。 3、使用浏览器后退按钮重复之前的操作，导致重复提交表单。 4、使用浏览器历史记录重复提交表单。 5、浏览器重复的 HTTP 请求。 二、防止表单重复提交的方法 1、禁掉提交按钮 表单提交后使用 Javascript 使提交按钮disable。这种方法防止心急的用户多次点击...
前端处理页面多次提交请求问题
qq_40756247的博客
07-20 2959
前端处理页面多次提交请求问题 在实际工作中我们常会遇到需要进行内容提交的场景，常用的表单就是其中的一种。在此类过程中我们一般会向后台发送ajax请求，其中因某些原因页面短时间内多次提交同一请求是一个常会遇到的问题。尽管我们可以通过后台做一些处理来限定提交的重复内容只有一次可以生效（例如重名验证等），但是前端页面在短时间内多次提交重复请求浪费了很多性能和流量，同时如果后台没做处理也会造成一些不可预估的错误，本文就是通过一些简单的前端处理方法来解决此问题。 首先上述问题一般出现于电脑卡顿严重或网络延迟较高的时候
form表单submit提交两次
最新发布
09-09
form表单的submit提交两次，一般出现以下几种情况： 1. 用户误操作：当用户点击submit按钮时，可能会出现手误或者不确定是否点击成功的情况，导致多次点击。这种情况下，我们可以通过前端的JavaScript代码来处理，可以使用禁用按钮或者显示一个加载提示，以避免用户多次提交。 2. 网络延迟或错误：当用户点击submit按钮后，如果网络延迟或者出现错误，可能会导致表单提交失败或者提交超时。在这种情况下，用户可能会继续点击按钮，试图重新提交表单。解决这个问题的办法可以是在提交表单时给出一个加载提示，并设置一个合理的超时时间，防止用户多次提交。 3. 表单重复提交：在某些情况下，当用户提交表单后，可能会出现表单页面的刷新或者重定向，导致表单提交的数据被重复提交。这可能是由于页面的设计或者服务器的设置问题造成的。为了避免这种情况，我们可以在表单提交后，对表单页面进行跳转或者重新加载，以防止重复提交。 总之，form表单的submit提交两次可能是由于用户误操作、网络延迟或错误以及表单重复提交等原因导致的。为了避免这种情况的发生，我们可以通过前端的JavaScript代码来处理用户操作，设置合理的超时时间，并对表单页面进行跳转或者重新加载。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值