您的位置：首页 > 其它

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

2009-04-09 17:52 375 查看

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

效果如下:

js代码如下:

<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>

一般处理程序页面(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;
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航