JQuery实现用户名重名查询

最新推荐文章于 2022-01-29 23:45:21 发布

转载最新推荐文章于 2022-01-29 23:45:21 发布 · 173 阅读

文章标签：

#javascript #xhtml #php #ViewUI

本文介绍如何使用JQuery实现简单的用户名重名查询功能。通过AJAX调用后端DataProvider.ashx文件，验证输入的用户名是否已被占用，并返回相应的提示信息。

JQuery是一个轻量级的DOM框架，用它实现上次简单用户名重名查询同样效果，
但更加简单了，看代码：

1 <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
2 < html xmlns ="http://www.w3.org/1999/xhtml" >
3 < head runat ="server" >
4      < title > JQuery implement </ title >
5      < script src ="js/jquery-1.2.6-vsdoc.js" type ="text/javascript" ></ script >
6      < script type ="text/javascript" >
7         $(document).ready( function () {
8             $( ' #btnCheck ' ).click( function () {
9                 $.ajax({
10                     type: " post " ,
11                     url: " DataProvider.ashx " ,
12                     beforeSend: function (XMLHttpRequest) {
13                         ShowLoading();
14
15                     },
16                     data: " username= " + $( ' #username ' ).val(),
17                     success: function (data, textStatus) {
18                         $( " #ajaxResult " ).html( "" );
19                         $( " #ajaxResult " ).append(data);
20                     },
21                     complete: function (XMLHttpRequest, textStatus) {
22                         HideLoading();
23                     },
24                     error: function () {
25                         alert( ' 出错了！ ' );
26                     }
27               , timeout: 1000
28                 });
29             }
30         )
31
32         })
33          function ShowLoading() {
34             $( " #wait " ).show( 400 , function () { });
35         }
36
37          function HideLoading() {
38             $( " #wait " ).hide( 760 , function () { });
39         }
40      </ script >
41
42      < style type ="text/css" media ="screen" >
43         @import url("http://www.taobao.com/home/css/tbsp/master/global_v3a.php?t=20080429.css");
44         @import url("http://www.taobao.com/home/css/component.php?t=20080624.css");
45         @import url("http://www.taobao.com/home/css/component_ext.php?t=20080624.css");
46         @import url("http://www.taobao.com/home/css/sys/register060524.css?t=20080624.css");
47      </ style >
48 </ head >
49 < body >
50      < form id ="form1" runat ="server" >
51      < div class ="Hint" >
52         用户名： </ div >
53      < div class ="Input" style ="width: 210px" >
54          < input id ="username" type ="text" size ="24" value ="" />
55          < br />
56          < input type ="button" id ="btnCheck" value ="检查用户名是否可用" />
57      </ div >
58      < div class ="Info" style ="width: 360px" >
59          < div id ="wait" style ="display: none" >
60             正在加载请等待

</ div >
61          < span id ="ajaxResult" ></ span >
62      </ div >
63      < a href ="http://wintersun.cnblogs.com" target ="_blank" > about me </ a >
64      </ form >
65 </ body >
66 </ html >

DataProvider code:

1 /// <summary>
2      /// Recevice Httphandler
3      /// <remarks> Author PetterLiu http://wintersun.cnblogs.com </remarks>
4      /// </summary>
5     [WebService(Namespace = " http://tempuri.org/ " )]
6     [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
7      public class DataProvider : IHttpHandler
8     {
9          /// <summary>
10          /// Process logic
11          /// </summary>
12          /// <param name="context"> HttpContext </param>
13          public void ProcessRequest(HttpContext context)
14         {
15              string username = context.Request.Form[ " username " ];
16              if (username == " petter " )
17                 context.Response.Write( string .Format( " 用户名<b>{0}</b>已存在。 " ,username));
18              else
19                 context.Response.Write( string .Format( " 恭喜你，你可以使用此用户名<b>{0}</b>。 " , username));
20         }
21
22          public bool IsReusable
23         {
24              get
25             {
26                  return false ;
27             }
28         }
29     }