关于表单重复提交问题

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

问题解决:

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

    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>

  

 
  

    

你可能感兴趣的:(重复提交)