为啥我的按钮点击执行多次？

Posted 2023-04-12

技术标签:

【中文标题】为啥我的按钮点击执行多次？【英文标题】：Why does my button click execute multiple times?为什么我的按钮点击执行多次？ 【发布时间】：2018-01-05 06:14:25 【问题描述】：

我已经编写了这个 ajax 代码来将数据发送到 Web 服务 asmx。它可以工作，但只需单击一下，它就会多次插入数据，有时需要点击 2,3 次才能插入数据。

.js

 <script type="text/javascript">

            function save()
            
                $("button").click
                (
                     function()
                     
                        $.post
                        (
                            "http://localhost:82/ws/himher.asmx/InsertUsers",
                            name: txtUserName.value, pwd: txtUserPwd.value,
//                          
                        );

                     
                );
            



        </script>
    </head>
<body> 
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                 <label>User Name</label>
                 <input id="txtUserName" type="text" class="form-control" />
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                 <label>Password</label>
                 <input id="txtUserPwd" type="text" class="form-control" />
            </div>
        </div>    
        <br/>
         <div class="row">
            <div class="col-md-12">     
                 <button type="submit" onclick='save()' class="btn btn-primary pull-right">Register</button>
            </div>
        </div>    
    </div>

.cs:

public class himher : System.Web.Services.WebService


    [WebMethod(EnableSession = true)]
    //[ScriptMethod(UseHttpGet = false)]
    public string InsertUsers(string name, string pwd)
    
        try
        
            basicoperation bop = new basicoperation();
            return bop.insertUsers(name, pwd);
        
        catch (Exception ex)
        

            throw ex;
        


    


    public string insertUsers(string Name, string Password)
    
            string status;

            String ConStr = ConfigurationManager.ConnectionStrings["ConStr"].ConnectionString;

            SqlConnection sqlCon = new SqlConnection(ConStr);    // to make a connection with DB 

            SqlCommand sqlCom = new SqlCommand("InsertUsers", sqlCon); // now in order to perform action such as insert SP, we must create command object which needs command name and conncetion only

            sqlCom.CommandType = CommandType.StoredProcedure;  // you must tell the system that insertInfo is a storedprocedure 

            SqlParameter sqlParamName = new SqlParameter("@UserName", Name);
            SqlParameter sqlParamPwd= new SqlParameter("@Password", Password);

            sqlCom.Parameters.Add(sqlParamName);
            sqlCom.Parameters.Add(sqlParamPwd);      

            try
            
                sqlCon.Open();

               int i= sqlCom.ExecuteNonQuery();   // executenonquery is used for INSERT, UPDATE, DELETE 

                //sqlCom.ExecuteScalar();   // used to pick or read a single value from procedure
               // Response.Write("Done");

                sqlCon.Close();

                status= "Success";
            
            catch (Exception ex)
            
                //response.Write(ex.Message);
                status = ex.Message;
            
        return status;

【问题讨论】：

name: txtUserName.value, pwd: txtUserPwd.value 后面不应该有逗号。 【参考方案1】：

您有两个与保存功能的绑定，其中一个在您单击按钮时被绑定。像这样重写你的 JS：

<script type="text/javascript">
    function save()
    
        $.post(
            "http://localhost:82/ws/himher.asmx/InsertUsers",
            name: txtUserName.value, pwd: txtUserPwd.value
        );
    
</script>

这样您的save 函数将执行仅保存逻辑。绑定调用这个函数是由<button type="submit" onclick='save()'>在html中完成的。

【讨论】：

【参考方案2】：

如果您要将此代码发布给用户，您确实需要实施一些重复操作预防，而不是希望他们只点击一次。因此，虽然您可能会发现它为什么插入倍数，但您不能依靠用户行为将垃圾排除在数据库之外；他们会放慢速度并沮丧地敲击那个按钮。即使您禁用该按钮，它们也会刷新并再次提交。在插入之前对数据进行重复数据删除 - 这是多层信息安全；即使他们禁用了阻止他们敲击按钮的脚本，您也不接受重复项

请注意，我不会将此作为真正的“我单击一次并插入 3 个数据”的解决方案 - 肯定会修复该错误，但会根据您对数据纯度的渴望控制用户行为，在服务器（您可以完全控制）

【讨论】：

以上是关于为啥我的按钮点击执行多次？的主要内容，如果未能解决你的问题，请参考以下文章

jquery为啥触发多次click事件

我的ASP.NET 程序点击按钮为啥没有反应？

JQ事件委托导致点击事件多次执行问题

防止用户快速多次点击按钮,响应事件响应多次

为啥当点击区域落在按钮上时 UIGestureRecognizerDelegate 的 shouldRecognizeSimultaneouslyWith 没有被执行？

js jquery 多次点击只执行一次