jQuery Ajax 鼠标离开 验证用户名是否存在（简单）

由于要在客户端进行用户名的验证是否存在，以免服务器端进行验证后要进行刷新，提交

所以 选择用ajax 进行传递（无刷新）

在这里选择用jQuery的 ajax

WebForm 页

方法一：

    <script type="text/javascript" language="javascript">
        function checkName() {
            $.ajax({　　　　　　　　
                type: "GET",
                url: "CheckName.aspx",
                dataType: "html",
                data: "name=" + $("#UserAccount").val(),
                beforeSend: function (XMLHttpRequest) {
                    $("#ErrorOrRight").text("正在查询.....");
                },
                success: function (msg) {
                        $("#ErrorOrRight").html(msg);
                        $("#ErrorOrRight").css("color","Green");
                },
                complete: function (XMLHttpRequest, textStatus) {
                    //隐藏正在查询图片
                },
                error: function () {
                    //错误处理
                }

            });
        }
   </script>

<input class="textinput" id="UserAccount" name="UserAccount" sizset="1" runat="server" onblur="checkName()">

这里用的是 checkName.aspx 进行用户的判断

protected void Page_Load(object sender, EventArgs e)
        {
            string name = Request.QueryString["name"];
            if (name.Length != 0)
            {
                SqlConnection conn1 = new SqlConnection("数据库连接");
                conn1.Open();
                SqlCommand cmd1 = new SqlCommand("SELECT * FROM [AccountsInfo] where Accounts='" + name + "'", conn1);
                SqlDataReader dr = cmd1.ExecuteReader();
                if (dr.Read())
                {
                    Response.Write("√ 通过！");// 存在该用户
                    return;
                }
                else
                {
                    Response.Write("× 对不起，没有该用户！");//没有改用户
                    return;
                }
            }
        }

方法二：

ps：原理都是一样 post 或者get 将数据发送到 处理文件

    <script type="text/javascript" language="javascript">
         function UserName() {
            var name = $("#UserAccount").val();
            $.post("checkName.ashx", { name: name }, function (result) {
                if (result == "1") {
                    $("#ErrorOrRight").html("√ 通过");
                    $("#ErrorOrRight").css("color", "green");
                }
                else if (result == "0") {
                    $("#ErrorOrRight").html("× 对不起，没有该用户");
                    $("#ErrorOrRight").css("color", "red");
                }
            })
        }
    </script>

<input class="textinput" id="UserAccount" name="UserAccount" sizset="1" runat="server" onblur="UserName()">

这次用的是 处理文件：checkName.ashx

        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            string name = context.Request.Form["name"];
            if (name.Length != 0)
            {
                SqlConnection conn1 = new SqlConnection("连接数据库");
                conn1.Open();
                SqlCommand cmd1 = new SqlCommand("SELECT * FROM [AccountsInfo] where Accounts='" + name + "'", conn1);
                SqlDataReader dr = cmd1.ExecuteReader();
                if (dr.Read())
                {
                    context.Response.Write("1");// 存在该用户
                    return;
                }
                else
                {
                    context.Response.Write("0");//没有改用户
                    return;
                }
            }
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }

PS:这里面的 css 样式 可自行加