为什么我的按钮单击多次执行？

Question

I have written this ajax code to send data to web service asmx. 我已经编写了此Ajax代码以将数据发送到Web服务asmx。 It works but with a single click, it inserts data multiple times and sometimes it takes 2,3 click to insert data. 它可以工作，但是只需单击一下，它就可以多次插入数据，有时需要2,3次单击才能插入数据。

.js .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: .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;
    }
}

Answer 1

You have two bindings to a saving function, one of them is binded when you click on your button. 您有两个保存功能的绑定，当您单击按钮时，其中一个已绑定。 Rewrite your JS like this: 像这样重写您的JS：

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

This way your save function will do only saving logic. 这样，您的save功能将仅保存逻辑。 Binding to call this function is done in HTML by <button type="submit" onclick='save()'> . 通过<button type="submit" onclick='save()'>在HTML中进行绑定以调用此函数。

Answer 2

If you're going to release this code to users you really need to implement some duplicate action prevention rather than hope they just click it once. 如果要向用户发布此代码，则确实需要实施一些重复的操作预防措施，而不是希望他们单击一次即可。 Ergo while you may find out why it insets multiples, you cannot rely on user behaviour to keep trash out of the database; 因此，虽然您可能会发现为什么它会插入倍数，但是您不能依靠用户的行为将垃圾内容排除在数据库之外。 they will hit a go slow and hammer that button in frustration. 他们会慢下来并挫败该按钮。 Even if you disable the button, they'll refresh and submit again. 即使您禁用该按钮，它们也会刷新并再次提交。 Dedupe your data before you insert - this is multi layer information security; 在插入之前对数据进行重复数据删除-这是多层信息安全性； even if they disable the script that stops them hammering the button, you don't accept the duplicates 即使他们禁用了停止敲击按钮的脚本，您也不接受重复的

Note, I don't offer this as a solution to a genuine "I click this once and 3 data are inserted" - fix that bug sure, but control the user behaviour with regards to your desire for data purity, within the server (where you're in total control) 请注意，我不提供此解决方案作为正版“我单击一次并插入3个数据”的解决方案-可以解决该错误，但可以在服务器内部（根据您对数据纯度的要求）控制用户行为您完全可以控制）

为什么我的按钮单击多次执行？

问题描述

2 个解决方案

解决方案1
2 2017-07-29 06:20:18

解决方案2
0 2017-07-29 06:26:45

为什么我的按钮单击多次执行？

问题描述

2 个解决方案

解决方案1 2 2017-07-29 06:20:18

解决方案2 0 2017-07-29 06:26:45

解决方案1
2 2017-07-29 06:20:18

解决方案2
0 2017-07-29 06:26:45