关于表单重复提交问题

最新推荐文章于 2024-05-05 14:09:44 发布

weixin_33929309

最新推荐文章于 2024-05-05 14:09:44 发布

阅读量98

点赞数

文章标签： xhtml c# javascript ViewUI

原文链接：http://www.cnblogs.com/xiaoXuZhi/p/3222702.html

版权

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

问题解决：

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

　　　　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>

转载于:https://www.cnblogs.com/xiaoXuZhi/p/3222702.html

weixin_33929309

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于表单重复提交问题

问题引入：当我们在做一个页面数据提交的时候，当我们连续点击提交按钮，因为快速连续点击，因为速度过快，页面还来不及反应，导致页面从复提交。。问题解决：　　对于问题又会设计到以下几种情况：　　　　1、我们利用Ajxax进行页面提交，对于这中情况，非常好解决，我们只需在页面设置一个变量“hasSubmit=false”,在ajax提交前对其“hasSubmit”验证，如果hasSubmit=...
复制链接

扫一扫