ASP.NET学习网|ASP.NET教程|ASP.NET MVC|ASP.NET 源码|VS2010教程|ASP.NET视频教程

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

效果如下:

 

<mce:script type="text/javascript"><!--  
        // JScript 文件  
        var xmlHttp;  
        function createXMLHttpRequest()  
        {  
            if(window.ActiveXObject)  
            {  
                 xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");  
            }  
            else if(window.XMLHttpRequest)  
            {  
                xmlHttp = new XMLHttpRequest();  
            }  
        }  
        //发送  
        function CallServer()  
        {  
            createXMLHttpRequest();  
            var uname=document.getElementById("username").value;  
            if(uname==""||uname==null)  
            {   
                document.getElementById("username").focus();     
                return false;  
            }  
             var url = "ajaxCheckName.ashx?name=" +uname+"&rd="+Math.random();  
             xmlHttp.open("GET", url, true);  
             xmlHttp.onreadystatechange = ShowResult;  
             xmlHttp.send(null);  
        }  
        //回调方法  
        function ShowResult()  
        {  
            if (xmlHttp.readyState < 4)   
            {  
                showSameName.innerHTML="<div class=r_loading></div>";  
            }  
            if(xmlHttp.readyState==4)  
            {  
                if(xmlHttp.status==200)  
                {  
                    showSameName.innerHTML=xmlHttp.responseText;  
                    if(showSameName.innerHTML=='<DIV class=r_err>抱歉，用户名已存在</DIV>')  
                    {  
                        document.getElementById("Button1").disabled=true;  
                    }  
                    else 
                    {  
                        document.getElementById("Button1").disabled=false;  
                    }  
                }  
            }  
        }  
        //如果同名后  
      
// --></mce:script> 
<mce:script type="text/javascript"><!--
        // JScript 文件
        var xmlHttp;
        function createXMLHttpRequest()
        {
            if(window.ActiveXObject)
            {
                 xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            else if(window.XMLHttpRequest)
            {
                xmlHttp = new XMLHttpRequest();
            }
        }
        //发送
        function CallServer()
        {
            createXMLHttpRequest();
            var uname=document.getElementById("username").value;
            if(uname==""||uname==null)
            {
                document.getElementById("username").focus();  
                return false;
            }
             var url = "ajaxCheckName.ashx?name=" +uname+"&rd="+Math.random();
             xmlHttp.open("GET", url, true);
             xmlHttp.onreadystatechange = ShowResult;
             xmlHttp.send(null);
        }
        //回调方法
        function ShowResult()
        {
            if (xmlHttp.readyState < 4)
            {
             showSameName.innerHTML="<div class=r_loading></div>";
            }
            if(xmlHttp.readyState==4)
            {
                if(xmlHttp.status==200)
                {
                    showSameName.innerHTML=xmlHttp.responseText;
                    if(showSameName.innerHTML=='<DIV class=r_err>抱歉，用户名已存在</DIV>')
                    {
                        document.getElementById("Button1").disabled=true;
                    }
                    else
                    {
                        document.getElementById("Button1").disabled=false;
                    }
                }
            }
        }
        //如果同名后
   
// --></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> 
<%@ 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;  
    }