关于表单重复提交问题

问题引入:当我们在做一个页面数据提交的时候,当我们连续点击提交按钮,因为快速连续点击,因为速度过快,页面还来不及反应,导致页面从复提交。。

问题解决:

  对于问题又会设计到以下几种情况:

    1、我们利用Ajxax进行页面提交,对于这中情况,非常好解决,我们只需在页面设置一个变量“hasSubmit=false”,在ajax提交前对其“hasSubmit”验证,如果hasSubmit==false才提交表单,在提交表单的同时修改hasSubmit=true,ajax提交完成时,在次修改hasSubmit=false即可完成。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Add.aspx.cs" Inherits="HealthAdmin.Video.Add" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>添加视频</title>
    <%--上传图片js--%>
    <script src="../Plugin/swfobject.js" type="text/javascript"></script>
    <script src="../Js/function.js" type="text/javascript"></script>
</head>
<body style="padding: 10px;">
    <form id="form1" runat="server">
    <div class="navigation">
        <span class="back"><a href="List.aspx">返回列表</a></span><b>您当前的位置:首页 > 视频管理 > 上传视频</b>
    </div>
    <div style="padding-bottom: 10px;">
    </div>
    <div style="margin-top: 10px; margin-left: 20%">
        <asp:Button ID="btnSave" runat="server" Text="确认保存" CssClass="submit" OnClick="btnSave_Click" />
    </div>
    </form>
    <script type="text/javascript">
        var hasSubmit = false;        //记录用户是否已经提交了表单
        $(function () {
          $("#btnSave").click(function(){
      if (!hasSubmit) {
                form.submit();
                 hasSubmit = true;
            }
    })

 }); 
</script>
 </body>
 </html>

  2、如果页面使用了jquery验证控件对其进行验证处理,则应该将其放置在submitHandler事件中进行处理

    实现代码如下

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Add.aspx.cs" Inherits="HealthAdmin.Video.Add" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>添加视频</title>
    <%--上传图片js--%>
    <script src="../Plugin/swfobject.js" type="text/javascript"></script>
    <script src="../Js/function.js" type="text/javascript"></script>
</head>
<body style="padding: 10px;">
    <form id="form1" runat="server">
    <div class="navigation">
        <span class="back"><a href="List.aspx">返回列表</a></span><b>您当前的位置:首页 > 视频管理 > 上传视频</b>
    </div>
    <div style="padding-bottom: 10px;">
    </div>
    <div style="margin-top: 10px; margin-left: 20%">
        <asp:Button ID="btnSave" runat="server" Text="确认保存" CssClass="submit" OnClick="btnSave_Click" />
    </div>
    </form>
    <script type="text/javascript">
        var hasSubmit = false;        //记录用户是否已经提交了表单
        $(function () {
            //表单验证JS
            $("#form1").validate({
                //出错时添加的标签
                errorElement: "span",
                success: function (label) {
                    label.text(" ").addClass("success");
                },
                error: function (label) {
                    label.text(" ").addClass("error");
                }
               ,
                submitHandler: function (form) {
                    if (!hasSubmit) {
                        form.submit();
                        hasSubmit = true;
                    }
                }
            });
        });

    </script>
</body>
</html>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏疯狂的小程序

微信小程序开发探索之路

项目起始时间:2017-11-25 前端人数: 3 页面数: 6 一期上线时间:2018-01-16 在我们开发的过程中,小程序的生态也不断变化。例如 最开始不...

2627
来自专栏从零开始学自动化测试

selenium+python自动化78-autoit参数化与批量上传

前言 前一篇autoit实现文件上传打包成.exe可执行文件后,每次只能传固定的那个图片,我们实际测试时候希望传不同的图片。 这样每次调用的时候,在命令行里面加...

3743
来自专栏大闲人柴毛毛

架构高性能网站秘笈(五)——Web组件分离

什么是Web组件? 网站的静态网页HTML、JavaScript脚本、CSS样式、图片、动态数据称为网站的Web组件。也就是说,一个Web应用由各种各样的We...

3978
来自专栏更流畅、简洁的软件开发方式

js的动态加载、缓存、更新以及复用(一)使用范围:遇到的问题:目标:页面结构:正文

使用范围:   OA、MIS、ERP等信息管理类的项目,暂时不考虑网站。 遇到的问题:   完成一个项目,往往需要引用很多js文件,比如jQuery.js、ea...

3635
来自专栏FreeBuf

WordPress插件Google Analytics by Yoast存储型XSS漏洞(含POC)

WordPress著名插件Google Analytics by Yoast插件中曝出存储型XSS漏洞,该漏洞能够让未被授权的攻击者在WordPress管理面板...

25210
来自专栏涤生的博客

Long Polling长轮询详解

众所周知,数据交互有两种模式:Push(推模式)、Pull(拉模式)。 推模式指的是客户端与服务端建立好网络长连接,服务方有相关数据,直接通过长连接通道推送到客...

1521
来自专栏Android干货

Android Studio 之 注释模板

4737
来自专栏华仔的技术笔记

用Vapor将一个Swift区块链应用部署到云端

3987
来自专栏Android群英传

渐进式Web应用入门-ServiceWorker

983
来自专栏彭湖湾的编程世界

redux-form的学习笔记

redux是一种常用的与react框架搭配的一种数据流架构,而伴随着redux的出现,也出现了许多基于redux开源的第三方库,而redux-form就是其中之...

2119

扫码关注云+社区

领取腾讯云代金券