阿贾克斯不打电话

I am trying to call ajax then ajax will call ´WebMethod`, but my AJAX is not executed.

Here is HTML Code for the TextBox.TextChanged Event

<input id="usernamesignup" name="usernamesignup" required="required" type="text"  placeholder="User Name" runat ="server" onchange="checkUserName();"/>

and for AJAX I have written JavaScript function

function checkUserName()
    {
        debugger;
        $.ajax({

            type: "POST",
            async: true,
            url: "SignUp1.aspx/CheckUserNameAvailability",
            data: '{username: "'+ $("#<%=usernamesignup.ClientID%>").value.trim() +'" }',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (response) {
              var msg = $("#<%=LabelStatus.ClientID%>")[0];
                switch (response.d) {
                    case "true":
                        msg.style.display = "block";
                        msg.style.color = "red";
                        msg.innerHTML = "User Name Or Email already exists.";
                        break;
                    case "false":
                        msg.style.display = "block";
                        msg.style.color = "green";
                        msg.innerHTML = "User Name Or Email Available";
                        break;
                }

            }
        });

    }

and my WebMethod is

    [System.Web.Services.WebMethod]
    public static int CheckUserNameAvailability(string username)
    {
        string conString = ConfigurationManager.ConnectionStrings["conStr"].ConnectionString;
        using (MySqlConnection conn = new MySqlConnection(conString))
        {
            using (MySqlCommand cmd = new MySqlCommand("spCheckUserNameAvailability", conn))
            {
                cmd.CommandType = CommandType.StoredProcedure;
                cmd.Parameters.AddWithValue("UserName", username);
                conn.Open();
                return (int)cmd.ExecuteScalar();
            }
        }
    }

Please anyone suggest me some changes in this code to make it work

Are you sure your method is not being called? Have you added a breakpoint?

In your Javascript you are checking against "true" or "false";

 switch (response.d) {
                    case "true":

However in your Server-Side code you are returning an Integer;

return (int)cmd.ExecuteScalar();

Therefor your switch will never hit any of the cases.

Consider opening the Developer console in your browser (F12) and checking the Console tab for Javascript errors, and then the Network tab for the result of your AJAX call to properly troubleshoot.

Sounds like when you render your html it doesn't know what that function is.

Try putting the listener into your js.

(function() {
//self invoking function to wait for dom.

function checkUserName()
    {
        debugger;
        $.ajax({

            type: "POST",
            async: true,
            url: "SignUp1.aspx/CheckUserNameAvailability",
            data: '{username: "'+ $("#<%=usernamesignup.ClientID%>").value.trim() +'" }',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (response) {
              var msg = $("#<%=LabelStatus.ClientID%>")[0];
                switch (response.d) {
                    case "true":
                        msg.style.display = "block";
                        msg.style.color = "red";
                        msg.innerHTML = "User Name Or Email already exists.";
                        break;
                    case "false":
                        msg.style.display = "block";
                        msg.style.color = "green";
                        msg.innerHTML = "User Name Or Email Available";
                        break;
                }

            }
        });

    }
    
    var myInput = document.getElementById("usernamesignup");
    myInput.addEventListener("change", checkUserName);
    
})

</div>