• JQuery实现用户名重名查询


            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(400function() { });
    35         }
    36 
    37         function HideLoading() {
    38             $("#wait").hide(760function() { });
    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=" 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=" 360px">
    59         <div id="wait" style="display: none">
    60             正在加载请等待</div>
    61         <span id="ajaxResult"></span>
    62     </div>
    63     <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     }
  • 相关阅读:
    2019-2020-1 20175201 20175215 20175229实验五 通讯协议设计
    2019-2020-1 20175201 20175215 20175229实验四 外设驱动程序设计
    2019-2020-1 实验三-并发程序 20175215
    20175201 20175215 20175229 实验二 固件程序设计
    冲刺博客汇总
    2018-2019-2 20175215 实验五《网络编程与安全》实验报告
    Int和Integer(课上测试)
    MySort(选做)
    2019-2020-2 20175234 赵诗玥 《网络对抗技术》 Exp1 PC平台逆向破解
    2019-2020-2 20175234 赵诗玥《网络对抗技术》 Exp0 Kali安装
  • 原文地址:https://www.cnblogs.com/wintersun/p/1359221.html
Copyright © 2020-2023  润新知