jQuery Ajax 鼠标离开 验证用户名是否存在(简单)
2011-05-06 11:29 AlexDotNet 阅读(1281) 评论(0) 编辑 收藏 举报由于要在客户端进行用户名的验证是否存在,以免服务器端进行验证后要进行刷新,提交
所以 选择用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 样式 可自行加