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" >
这里用的是 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" >
这次用的是 处理文件: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 样式 可自行加
- 上一篇 »python3 验证用户名密码
- 下一篇 »AJAX+JavaScript无刷新检查用户名