為什么我的按鈕單擊多次執行？

Question

我已經編寫了此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;
    }
}

Answer 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中進行綁定以調用此函數。

Answer 2

如果要向用戶發布此代碼，則確實需要實施一些重復的操作預防措施，而不是希望他們單擊一次即可。 因此，雖然您可能會發現為什么它會插入倍數，但是您不能依靠用戶的行為將垃圾內容排除在數據庫之外。 他們會慢下來並挫敗該按鈕。 即使您禁用該按鈕，它們也會刷新並再次提交。 在插入之前對數據進行重復數據刪除-這是多層信息安全性； 即使他們禁用了停止敲擊按鈕的腳本，您也不接受重復的

請注意，我不提供此解決方案作為正版“我單擊一次並插入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