专栏首页angularejs学习篇关于表单重复提交问题

关于表单重复提交问题

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

问题解决:

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

    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 条评论
登录 后参与评论

相关文章

  • angularjs学习第三天笔记(过滤器第二篇---filter过滤器及其自定义过滤器)

    您好,我是一名后端开发工程师,由于工作需要,现在系统的从0开始学习前端js框架之angular,每天把学习的一些心得分享出来,如果有什么说的不对的地方,请多多指...

    小小许
  • angularjs学习第三天笔记(过滤器第二篇---filter过滤器及其自定义过滤器)

    您好,我是一名后端开发工程师,由于工作需要,现在系统的从0开始学习前端js框架之angular,每天把学习的一些心得分享出来,如果有什么说的不对的地方,请多多指...

    小小许
  • angularjs学习第一天笔记

        您好,我是一名后端开发工程师,由于工作需要,现在系统的从0开始学习前端js框架之angular,每天把学习的一些心得分享出来,如果有什么说的不对的地方,...

    小小许
  • 从零开始学习React-属性绑定(三)

    前面两节用的是HBuilder编辑器,很多童鞋说Visual Studio Code很好用,确实如此,因为平时开发用习惯了前者,写教程的时候,为了方便大家体验,...

    祈澈菇凉
  • 在SAP WebIDE里开发一个React component

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 ...

    Jerry Wang
  • [angularjs] 前端路由实现单页跳转

    陶士涵
  • 最新jquery+easyui_api培训文档

    用户1112962
  • WebMagic爬取指定内容和一些特性介绍(附演示代码)

    可能有很多小伙伴不了解Xpath语法是什么,我就给大家稍微介绍下,想要了解更多可以百度或者后台联系我,XPath 是一门在 XML 文档中查找信息的语言。XPa...

    框架师
  • 初识angularjs

    之前有学习过一段时间的backbone,近期在同事的建议了稍稍的来了解了一下angularjs,和backbone一样,同是比较著名和流行的前端MVC框架。另外...

    the5fire
  • javascript对象查看器

    <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb231...

    用户1183026

扫码关注云+社区

领取腾讯云代金券