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

Question

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


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

代码如下:

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

复制代码JS代码



代码如下:

1. <script type="text/javascript" src="CSS/jquery-1.3.2.js"></script>
   
2. <script type="text/javascript">
   
3. function JudgeUserName()
   
4. {
   
5. $.ajax({
   
6. type:"GET",
   
7. url:"AjaxUserInfoModify.aspx",
   
8. dataType:"html",
   
9. data:"userName="+$("#txtName").val(),
   
10. beforeSend:function(XMLHttpRequest)
    
11. {
    
12. $("#showResult").text("www.3ppt.com正在查询");
    
13. //Pause(this,100000);
    
14. },
    
15. success:function(msg)
    
16. {
    
17. $("#showResult").html(msg);
    
18. $("#showResult").css("color","red");
    
19. },
    
20. complete:function(XMLHttpRequest,textStatus)
    
21. {
    
22. //隐藏正在查询图片
    
23. },
    
24. error:function()
    
25. {
    
26. //错误处理
    
27. }
    
28. });
    
29. }
    
30. </script>

复制代码2 、页面AjaxUserInfoModify.aspx



后台代码



代码如下:

1. 
   
2. protected void Page_Load(object sender, EventArgs e)
   
3. {
   
4. string userName = Request.QueryString["userName"].ToString ();
   
5. if (userName == "James Hao")
   
6. {
   
7. Response.Write ("用户名已经存在！");
   
8. }
   
9. else
   
10. {
    
11. Response.Write ("您可以使用此用户名！");
    
12. }
    
13. }
    

复制代码3 、运行界面

(1)初始化界面

1.gif (3.36 KB, 下载次数: 3)

下载附件

2011-04-07 15:58 上传

（2）正在查询提示页面

2.gif (3.31 KB, 下载次数: 2)

下载附件

2011-04-07 15:58 上传

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

3.gif (3.42 KB, 下载次数: 2)

下载附件

2011-04-07 15:58 上传

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

4.gif (3.58 KB, 下载次数: 3)

下载附件

2011-04-07 15:58 上传

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

转自：http://www.cnblogs.com/huabingch ... /04/07/2008004.html