Ajax无刷新检测用户名是否占用,如果占用则不能提交!

在网上找的ajax代码判断用户是否被注册过,这些代码都有一个共同的点,如果异步检测到数据库中有相同的用户名,那么返回的xmlHttp.responseText只是提示我们该数据数据库中已存在,但是却忽略了一个问题,就是可能用户还是用这个相同的用户名直接提交,那么我们检测这一步就相当于是一个摆设,没有任何限制.所以我就对此做了些改进,将传回来的数据进行了判断,然后根据具体情况,将提交按钮的disabled值进行改写,这样如果检测到用户名相同的话,提交按钮是不可用的.

效果如下:

js代码如下:

<mce:script type="text/javascript"></mce:script>

aspx页面:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="AdmUser.aspx.cs" Inherits="Administrator_AminUser" %> <%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="cc1" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>无标题页</title> <mce:style type="text/css"><!-- .r_ok{background:url(../images/r_ok.gif) no-repeat;padding-left:35px;height:22px;line-height:22px;color:#333} .r_err{background:url(../images/r_err.gif) no-repeat;padding-left:35px;height:22px;line-height:22px;color:#333} .r_loading{background:url(../images/loading.gif) no-repeat;padding-right:5px;height:22px;line-height:22px;color:#333} </style> </head> <body style="background-color:White; margin:0 5px 0 5px;" mce_style="background-color:White; margin:0 5px 0 5px;"> <form id="form1" runat="server"> <div> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <table style="width:100%; border: 1px solid #003399; border-collapse: collapse; text-align: left; font-size: 13px;"> <tr> <td> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td height="24" bgcolor="#507cd1"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td> <table width="100%" border="0" cellspacing="0" cellpadding="0" > <tr> <td style="background-image: url(../Images/vHeader.gif);height: 25px; padding-left: 10px; font-weight: bold;">添加新用户 </td> </tr> </table> </td> </tr> </table> </td> </tr> </table> </td> </tr> <tr> <td> <table style="border: 0px solid #507cd1; width:100%;background-color: #FFFFFF; visibility: collapse; text-align:center;"> <tr> <td align="right" style="font-size: small" mce_style="font-size: small" class="style2">用户名：</td> <td align="left" style="color: #FF0000" mce_style="color: #FF0000"><asp:TextBox ID="username" runat="server" onblur="CallServer();"></asp:TextBox> * </td> <td id="showSameName" style=" text-align:left; width:50%"> </td> </tr> <tr> <td> </td> <td style=" text-align:left; padding-left:10px;" mce_style=" text-align:left; padding-left:10px;"> <asp:Button ID="Button1" runat="server" Font-Size="Small" Text="添加" onclick="Button1_Click" /> <input class="HtmlButton" id="Reset1" type="reset" value="重置" /> </td> <td></td> </tr> </table> </td> </tr> </table> </div> </form> </body> </html>

一般处理程序页面(ajaxCheckName.ashx)

public void ProcessRequest (HttpContext context) { context.Response.ContentType = "text/plain"; //context.Response.Write("Hello World"); string flag = string.Empty; string strUserName = context.Request.QueryString[0]; if (!isUserNameExist(strUserName)) { flag = "<div class=r_ok>恭喜，该用户名可以注册</div>"; } else { flag = "<div class=r_err>抱歉，用户名已存在</div>"; } context.Response.Write(flag); } private bool isUserNameExist(string strUserName) { bool ajaxRet = false; //在实际的项目应用中下面就可以去执行数据库查询进行验证 string sql = "select top 1 * from AdmUser where adminName='" + strUserName + "'"; if(ExamDb.GetSingleValue(sql)!="") { ajaxRet = true; } return ajaxRet; }

posted on 2009-04-09 17:52 Renn.Erann 阅读(508) 评论(0) 编辑收藏举报