基于jQuery实现的Ajax 验证用户名是否存在的实现代码

196 阅读 0 评论 130 点赞

我是靠谱客的博主狂野超短裙，最近开发中收集的这篇文章主要介绍基于jQuery实现的Ajax 验证用户名是否存在的实现代码，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

实例：
1、请求页面AJax.aspx
HTML代码

复制代码代码如下:

 
<div> 
<input id="txtName" type="text" /><input type="button" value="查看用户名是否存在" id="btn" onclick="JudgeUserName();" /> 
<div id="showResult" style="float:left">div> 
div> 

JS代码

复制代码代码如下:

 
<script type="text/javascript" src="CSS/jquery-1.3.2.js"></script> 
<script type="text/javascript"> 
function JudgeUserName() 
{ 
$.ajax({ 
type:"GET", 
url:"AjaxUserInfoModify.aspx", 
dataType:"html", 
data:"userName="+$("#txtName").val(), 
beforeSend:function(XMLHttpRequest) 
{ 
$("#showResult").text("正在查询"); 
//Pause(this,100000); 
}, 
success:function(msg) 
{ 
$("#showResult").html(msg); 
$("#showResult").css("color","red"); 
}, 
complete:function(XMLHttpRequest,textStatus) 
{ 
//隐藏正在查询图片 
}, 
error:function() 
{ 
//错误处理 
} 
}); 
} 
</script> 

2 、页面AjaxUserInfoModify.aspx
后台代码

复制代码代码如下:

 
protected void Page_Load(object sender, EventArgs e) 
{ 
string userName = Request.QueryString["userName"].ToString (); 
if (userName == "James Hao") 
{ 
Response.Write ("用户名已经存在！"); 
} 
else 
{ 
Response.Write ("您可以使用此用户名！"); 
} 
} 

3 、运行界面

(1)初始化界面