AJAX+.NET实现不用点击自动无刷新检测用户名是否存在
例如,会员注册的时候
用户名,密码,姓名,年龄等
在用户名中输入完成以后,不点提交,自动检测用户名是否已被占用了
这个例子有没有谁做过,哪位大哥提供个例子给我看看噻
[解决办法]
看看这个就知道怎么做了
http://www-128.ibm.com/developerworks/cn/xml/wa-ajaxintro1.html
[解决办法]
利用ajax轻松实现
[解决办法]
http://community.csdn.net/Expert/topic/5398/5398666.xml?temp=.8074304
[解决办法]
javascript鼠标离开输入框后提交ajax去返回结果啊
[解决办法]
什么是ajax?当你明白它的意思后一小段代码，使用xmlhttp对象，获取服务器段一个段XML文件就解决问题。
[解决办法]
http://blog.csdn.net/zhulei2008
[解决办法]
1.首先在web.config中配置好
<httpHandlers>
<add verb= "POST,GET " path= "ajax/*.ashx " type= "Ajax.PageHandlerFactory, Ajax " />
</httpHandlers>
2.
private void Page_Load(object sender, System.EventArgs e)
{
Ajax.Utility.RegisterTypeForAjax(typeof(clsValdate) ,this);
}
3.
internal class clsValdate
{
[Ajax.AjaxMethod]
public string ValidateInput(string userName)
{
string su = "xxx ";
//可以在这里操作．
string retVal = "用户不存在，可以使用！ ";
if(userName.Equals(su))
retVal = "用户名已存在，请选用其它用户名 ";
return retVal;
}
}
4.
<script language= "javascript " type= "text/javascript ">
function ValidateInputData()
{
var txt = document.all[ "txtUserName "];
if(txt.value == " ")
{
Show( "用户名不能为空 ");
return false;
}
var _value = clsValdate.ValidateInput(txt.value).value;
if(_value != null)
{
Show(_value);
}
return true;
}
function Show(message)
{
var objMessage = document.all[ "spMessage "];
objMessage.style.display = " ";
objMessage.innerText = message;
}
</script>
5.
<table width= "450 " align= "center " cellpadding= "2 ">
<tr>
<td colspan= "2 " height= "20px " align= "center "> <span id= "spMessage " style= "display:none; " class= "ms "> </span> </td>
</tr>
<tr>
<td align= "right "> 用户名 </td>
<td>
<asp:TextBox id= "txtUserName " onblur= "return ValidateInputData(); " runat= "server " CssClass= "tb "> </asp:TextBox> </td>
</tr>
<tr>
<td align= "right "> 密码 </td>
<td>
<asp:TextBox id= "TextBox2 " runat= "server " CssClass= "tb "> </asp:TextBox> </td>
</tr>
<tr>
<td align= "right "> 确认密码 </td>
<td>
<asp:TextBox id= "TextBox3 " runat= "server " CssClass= "tb "> </asp:TextBox> </td>
</tr>
<tr>
<td colspan= "2 " align= "center ">
<asp:Button id= "btnSubmit " runat= "server " Text= "Submit " CssClass= "tb "> </asp:Button> </td>
</tr>
</table>
[解决办法]
用光标的.
onfocus和onblur事件 ,没有什么,只是将单击事件换为光标事件
[解决办法]
mark
[解决办法]
Lcindep110(Descovering YourSelf)
谢谢这位兄弟，把分给他吧！
[解决办法]
// AjaxPro 版本的示例
// .aspx
<%@ Page Language= "C# " AutoEventWireup= "true " CodeFile= "AjaxPro_CheckDuplicatedUserName.aspx.cs " Inherits= "AjaxPro_AjaxPro_CheckDuplicatedUserName " %>
<!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> AjaxPro_CheckDuplicatedUserName </title>
<script type= "text/javascript ">
<!--
function CheckDuplicatedUserName(sender)
{
var callback = function(res) {
var spnRes = document.getElementById( "spnCheckDuplicatedUserNameResult ");
var btnSubmit = document.getElementById( "btnSubmit ");
if(res.error) return alert(res.error.Message);
if(res.value) {
spnRes.innerHTML = "对不起，此用户名已被使用，请换用其他用户名。 ";
spnRes.style.backgroundColor = "f90 ";
sender.focus();
btnSubmit.disabled = true;
} else {
spnRes.innerHTML = "恭喜您，此用户名可以使用。 ";
spnRes.style.backgroundColor = "lightgreen ";
btnSubmit.disabled = false;
}
}
AjaxProSample.CheckDuplicatedUserName(sender.value, callback);
}
function btnSubmit_Click() {
}
// -->
</script>
</head>
<body>
<form id= "form1 " runat= "server ">
<div>
<table style= "width: 100% ">
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td width= "100 ">
用户名： </td>
<td width= "200 ">
<input id= "txtUserName " type= "text " onblur= "CheckDuplicatedUserName(this) " /> </td>
<td> <span id= "spnCheckDuplicatedUserNameResult " style= "border: green 1px solid "> </span>
</td>
</tr>
<tr>
<td>
密码： </td>
<td>
<input id= "txtPassword " type= "password " /> </td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
<input id= "btnSubmit " type= "button " disabled= "disabled " value= "提交 " onclick= "return btnSubmit_Click() " /> </td>
<td>
</td>
</tr>
</table>
<asp:GridView ID= "GridView1 " AutoGenerateColumns= "false " runat= "server ">
<Columns>
<asp:TemplateField HeaderText= "已存在的用户名 ">
<ItemTemplate>
<%# Container.DataItem %>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
</form>
</body>
</html>
// .aspx.cs
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Collections.Generic;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using AjaxPro;
[AjaxPro.AjaxNamespace( "AjaxProSample ")]
public partial class AjaxPro_AjaxPro_CheckDuplicatedUserName : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
GridView1.DataSource = GetSimulatingUserNameList();
GridView1.DataBind();
AjaxPro.Utility.RegisterTypeForAjax(typeof(AjaxPro_AjaxPro_CheckDuplicatedUserName));
}
/// <summary>
/// 模拟的用户列表
/// </summary>
/// <returns> </returns>
public static List <string> GetSimulatingUserNameList()
{
List <string> userNameList = HttpContext.Current.Session[ "SimulatingUserNameList "] as List <string> ;
if (userNameList == null) {
userNameList = new List <string> ();
userNameList.Add( "Jack ");
userNameList.Add( "Tom ");
userNameList.Add( "Jim ");
userNameList.Add( "Leo ");
userNameList.Sort(delegate(string x, string y) { return x.ToUpper().CompareTo(y.ToUpper()); });
HttpContext.Current.Session[ "SimulatingUserNameList "] = userNameList;
}
return userNameList;
}
[AjaxMethod]
public static bool CheckDuplicatedUserName(string userName)
{
List <string> existedUserNames = GetSimulatingUserNameList();
// 不区分大小写
return (existedUserNames.BinarySearch(userName.ToUpper(), StringComparer.InvariantCultureIgnoreCase) > -1);
}
}
[解决办法]
留个脚印
[解决办法]
看看
[解决办法]
http://office.glass.cn/join.html
这个效果不错
[解决办法]
Lcindep110
你得整完提示clsValdate 未定义
[解决办法]
aj
------解决方案--------------------
mark
[解决办法]
xmlHttp
[解决办法]
我这里有一个程序，刚好是实现这个功能的。
首先页面中代码
<script type= "text/javascript " language= "javascript ">
var xmlHttp = null;
function CheckUser()
{
try
{
xmlHttp = new ActiveXObject( "Msxml2.XMLHTTP ");
}
catch(err1)
{
try
{
xmlHttp = new ActiveXObject( "Microsoft.XMLHTTP ");
}
catch(err2)
{
xmlHttp = new XMLHttpRequest();
}
}
var Text1 = document.getElementById( "Text1 ");
var url = "chkuser.aspx?User= " + Text1.value;
xmlHttp.open( "GET ",url,true);
xmlHttp.onreadystatechange = OnHandler;
xmlHttp.send(null);
}
function OnHandler()
{
if(xmlHttp.readyState == 4)
{
var isValid = xmlHttp.responseText;
var exists = document.getElementById( "exsits ");
exists.innerHTML = isValid.substring(0,4);
}
}
</script>
<input id= "Text1 " type= "text " onblur= "CheckUser() " /> <label d= "exsits "> </label> <br />
然后建一个chkuser.aspx，其后台代码改为
protected void Page_Load(object sender, EventArgs e)
{
string user = this.Request.QueryString[ "User "];
if (UserExist(user))
{
Response.Write( "存在 ");
}
else
{
Response.Write( "不存在 ");
}
}
private bool UserExist(string username)
{
ClassLib.Employee emp = new ClassLib.Employee();
return emp.EmpNameExist(username);
}
[解决办法]
失去焦点或是内容变化时用js判断 调用方法或函数就行了
[解决办法]
在用户名控件上加个onblur（失去焦点）事件调用ajax的程序就可以，
[解决办法]
Ajax 可以
我的解法 和 9楼的一样
[解决办法]
碰巧刚好弄过一个这样的示例，是基于文本框的onkeyup evnet
http://blog.csdn.net/mndn_nana/archive/2008/01/10/2033764.aspx
LZ看过后便知晓
