zoukankan      html  css  js  c++  java
  • 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     }
  • 相关阅读:
    dp周训练 状态压缩
    计算几何 点对处理 #345 (Div. 2) C. Watchmen
    Codeforces Round #303 (Div. 2) D. Queue 水题贪心
    TTTTTTTTTTTTT 树的直径 Codeforces Beta Round #14 (Div. 2) D. Two Paths
    TTTTTTTTTTTTT CF Good Bye 2015 C- New Year and Domino(CF611C) 二维前缀
    巨蟒python全栈开发数据库前端8:jQuery框架2
    计时器练习
    onload事件,解决不能在head写代码
    js引入方式的弹框方法2
    pycharm中格式标准化代码
  • 原文地址:https://www.cnblogs.com/wintersun/p/1359221.html
Copyright © 2011-2022 走看看