• 关于表单重复提交问题


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

    问题解决:

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

        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>
    

      

    
    

        

  • 相关阅读:
    函数重载和函数指针在一起
    Uva
    Uva
    Uva
    Uva
    Uva
    CCPC-Wannafly-day5
    CCPC-Wannafly-day3
    CCPC-Wannafly-day2
    CCPC-Wannafly-Winter 2020.01.12总结
  • 原文地址:https://www.cnblogs.com/xiaoXuZhi/p/3222702.html
Copyright © 2020-2023  润新知