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("www.3ppt.com正在查询");

//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)初始化界面



（2）正在查询提示页面



（3） 验证用户名已经存在页面



（4） 验证用户名未存在页面



至此 AJAX验证用户名是否存在的功能已经完成。