前言

form 表单提交的时候，当快速点击提交按钮的时候，会触发多个请求过去，会导致重复添加。

前端页面

前端form表单页面，2个输入框，一个提交按钮

<form id="form" action="" method="post" class="form-horizontal" role="form"><div class="form-group"><label for="project_name" class="col-xm-1 col-sm-2 col-md-1 control-label">项目名称:</label><div class="col-xs-10 col-sm-8 col-md-5" ><input type="text" class="form-control" id="project_name" name="project_name" placeholder="请输入项目名称"></div></div><div class="form-group"><label for="responsible_name" class="col-xm-1 col-sm-2 col-md-1 control-label">负责人员:</label><div class="col-xs-10 col-sm-8 col-md-5" ><input type="text" class="form-control" id="responsible_name" name="responsible_name" placeholder="请输入负责人"></div></div><div class="form-group"><div class="col-xs-10 col-sm-offset-2 col-sm-8 col-md-offset-1 col-md-5" ><input id="save" type="button" class="form-control btn btn-success" value="点击提交"></div></div>
</form>

这里用ajax提交请求

<script>
/**
定义表单提交事件
*/
function project_save(){var $form = $("#form"); // The form instance$.ajax({type:'post',url:'/page',data: $form.serialize(),dataType:'json',success: function(data){if(data.code == 0){console.log("提交成功");// 重定向到列表页location.href="/page/list_project/";}else{alert('添加失败')}},error: function (jqXHR, textStatus, e) {alert("提交异常："+e);}});}//点提交按钮，发请求
$('#save').click(function(e) {project_save();})
</script>

遇到问题，当快速点提交按钮多次，会触发多个请求

beforeSend 禁用添加按钮

解决办法，在点提交按钮，发请求之前，可以调用beforeSend 方法，添加一个disabled属性，禁用按钮。这样用户就无法继续点击了。
收到返回结果的时候，再取消disabled属性

/**
定义表单提交事件
*/
function project_save(){var $form = $("#form"); // The form instance$.ajax({type:'post',url:'/page',data: $form.serialize(),dataType:'json',beforeSend: function() {// 设置disabled阻止用户继续点击$('#save').attr('disabled', 'disabled');},success: function(data){if(data.code == 0){console.log("提交成功");// 重定向到列表页location.href="/page/list_project/";}else{// 让按钮生效，重新可点击$('#save').removeAttr('disabled');alert('添加失败')}},error: function (jqXHR, textStatus, e) {// 让按钮生效，重新可点击$('#save').removeAttr('disabled');alert("提交异常："+e);}});}

这样就能解决快速点击，导致前端页面重复提交的问题

complete 完成请求

一般在 beforeSend 发请求之前禁用提交按钮，在请求完成之后移除 disabled 属性。
complete 是在完成请求的时候触发。

function project_save(){var $form = $("#form"); // The form instance$.ajax({type:'post',url:'/page',data: $form.serialize(),dataType:'json',beforeSend: function() {// 设置 disabled 阻止用户继续点击$('#save').attr('disabled', 'disabled');},complete: function () {// 请求完成移除 disabled 属性 $("#save").removeAttr("disabled");},success: function(data){if(data.code == 0){console.log("提交成功");// 重定向到列表页location.href="/page/list_project/";}else{// 让按钮生效，重新可点击alert('添加失败')}},error: function (jqXHR, textStatus, e) {alert("提交异常："+e);}});}

python测试开发django-162.ajax 提交表单，防重复提交（beforeSend）相关推荐

Spring MVC表单防重复提交
转载自 Spring MVC表单防重复提交利用Spring MVC的过滤器及token传递验证来实现表单防重复提交. 创建注解 @Target(ElementType.METHOD) @Retent ...
表单防重复提交拦截器
表单防重复提交 http://blog.icoolxue.com/submitted-by-spring-mvc-to-prevent-data-duplication/
关于表单防重复提交一些东东
前阵子弄了些表单防重复提交的东西,想整理整理,免得下次要用时再四处去找,其实这里的东西还是挺简单的. 原理: 在Session中保存一个表单的唯一编号,将该编号放在一个隐藏域中,同其他数据一同提交.在 ...
python表单防重复提交_传统方式提交表单，防止重复提交问题？
提交表单的时候,不是使用ajax提交,就是传统的表单提交,为防止表单重复提交,应该怎么写javascript或jquery代码呢?如果提交没成功,怎么恢复提交按钮? html如下: Email add ...
python表单防重复提交_防止表单重复提交的几种策略
表单重复提交是在多用户Web应用中最常见.带来很多麻烦的一个问题.有很多的应用场景都会遇到重复提交问题,比如: 点击提交按钮两次. 点击刷新按钮. 使用浏览器后退按钮重复之前的操作,导致重复提交表单. ...
java表单防重复提交_防止表单重复提交的解决方案整理
用户在操作表单Post数据时往往会出现表单数据重复提交的问题,尤其在Web开发中此类问题比较常见.刷新页面,后退操作以前的页面,单机多次按钮都会导致数据重复提交.此类问题是因为浏览器重复提交HTTP请 ...
python表单防重复提交_关于PHP使用token防止表单重复提交的方法
这篇文章主要介绍了PHP使用token防止表单重复提交的方法,通过生成一个加密后的随机数存入session的token变量,同时将该值放入表单隐藏提交,达到防止表单重复提交的功能,需要的朋友可以参考下 ...
python表单防重复提交_防止二次提交(重复提交)
@每次请求时产生一个token(一般为时间戳),存于session中并随之用hidden提交,在servlet中判断接收到的token和session中的是否一致来判断是否重复提交,如果不是则重新产生 ...
表单的重复提交问题解决方案
1.在我们的web开发中,常常会遇到表单的重复提交问题,那么我们的解决方案有两种:①重定向:response.sendrediect(); ②token的使用,即做个标记下面写一个token的例子: ...
利用beforeSend实现提交加载中、form表单的重复提交等前端功能
前文在用JQ+bootstrap写前端的时候,有时需要实现点击按钮后失效的功能,比如下载按钮,为了避免网络延迟而引起的页面不及时跳转,让用户多次点击按钮,造成的服务器压力和用户体验就都不友好.发 ...

python测试开发django-162.ajax 提交表单，防重复提交（beforeSend）

前言

前端页面

beforeSend 禁用添加按钮

complete 完成请求

python测试开发django-162.ajax 提交表单，防重复提交（beforeSend）相关推荐

最新文章

热门文章