您的当前位置:首页AJAX实现无刷新检测用户名_AJAX相关

AJAX实现无刷新检测用户名_AJAX相关

2023-12-01 来源:瑞奇养生
这篇文章主要为大家详细介绍了AJAX实现无刷新用户名检测功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

先来看看原理图

register.php

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>ajax无刷新检测</title> <style type="text/css"> body{margin:0;padding:0;}.content{width:800px;margin:0 auto;}ul,li{list-style: none;margin:0;padding:0;} tr{width:200px;}td{width:80px;padding:5px 0;}td input,textarea{border: 1px solid #79ABFE;} </style> </head> <body> <p class="content"> <script> myXmlHttpRequest.ContentType=("text/xml;charset=UTF-8"); //创建ajax引擎(1号线) function getXmlHttpObject(){ var xmlHttpRequest; //不同浏览器获取对象xmlHttpRequest方法不一样 if(window.ActiveXObject){ xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP"); }else{ xmlHttpRequest=new XMLHttpRequest(); } return xmlHttpRequest; } //验证用户名是否存在 var myXmlHttpRequest="";//因为chuli也用到了,所以要定义为全局变量 //创建方法(2号线 http请求) function checkName(){ //创建对象 myXmlHttpRequest=getXmlHttpObject(); //判断是否创建ok if(myXmlHttpRequest){ //通过myXmlHttpRequest对象发送请求到服务器的某个页面 var url="./registerPro1.php"; //要发送的数据 var data="username="+$('username').value; //打开请求 myXmlHttpRequest.open("post",url,true);//ture表示使用异步机制 //POST方法 myXmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); //指定回调函数,chuli是函数名(registerPro里的数据返回给chuli函数) myXmlHttpRequest.onreadystatechange=chuli; //开始发送数据,如果是get请求则填入null即可,如果是post请求则填入实际的数据 myXmlHttpRequest.send(data); } } //回调函数(4号线) function chuli(){ //取出从registerPro.php页面返回的数据(4表示完成,200表示成功) if(myXmlHttpRequest.readyState==4){ if(myXmlHttpRequest.status==200){ //①、取出值,根据返回信息的格式定 text(html) //$('result').value=myXmlHttpRequest.responseText; //②、取出xml格式数据(解析) //获取mes节点、这里的mes返回的是节点列表(不知道有几个mes) //var mes=myXmlHttpRequest.responseXML.getElementsByTagName("mes"); //取出mes节点值 //mes[0]->表示取出第一个mes节点 //mes[0].childNodes[0]->表示取出mes节点的第一个子节点 //var mes_val=mes[0].childNodes[0].nodeValue; //$("result").value=mes_val; //③、json格式 //var mes=myXmlHttpRequest.responseText; //使用eval函数,将mes字串转为对象 //var mes_obj=eval("("+mes+")"); //$('result').value=mes_obj.res; //③+、json格式扩展 var mes=myXmlHttpRequest.responseText; var mes_obj=eval("("+mes+")"); $('result').value=mes_obj[0].res; } } } //封装一个函数,通过id号获取对象 function $(id){ return document.getElementById(id); } </script> <br/> <strong style="color:red">发表留言</strong> <form action="#" method="POST" name="frm"> <table cellpadding="0" cellspacing="0" > <tr> <td >留言标题:</td> <td><input type="text" name="title" autocomplete="off"/></td> </tr> <tr> <td>网名:</td> <td> <input id="username" onkeyup="checkName();" type="text" name="username" autocomplete="off"/> <td><input id="result" type="text" style="width:110px;font-size: 12px;border-width:0;" ></td> </td> </tr> <tr> <td>留言内容:</td> <td><textarea name="content" cols="26" rows="5" autocomplete="off"/ onclick="showNotice(this)"></textarea></td> </tr> <tr> <td></td> <td><input class="btn" type="submit" name="submit" value="提交"/></td> </tr> </table> </form> </p> </body></html>

registerPro1.php

<?php //将数据(text格式,xml格式,json格式)返回到ajax引擎(3号线 http响应 ) //header("Content-Type: text/xml; charset=utf-8"); //告诉浏览器,返回的是xml格式 header("Content-Type: text/html; charset=utf-8"); //告诉浏览器,返回的是text/json格式 $username = $_POST["username"]; //①// if($username=="abc"){// echo '网名不可用';// }else{// echo '网名可用';// } //②// $info="";// if($username=="abc"){// $info.="<res><mes>网名不可用</mes></res>";// }else{// $info.="<res><mes>网名可用</mes></res>";// }// echo $info; //③// $info="";// if($username=="abc"){// //这里的$info返回的是一个字串// $info.='{"res":"不可用","id":"123","age":"5"}';// }else{// $info.='{"res":"可用","id":"3","age":"1"}';// }// echo $info; //③+ $info=""; if($username=="abc"){ //这里的$info返回的是一个字串 $info.='[{"res":"不可用","id":"123","age":"5"},{"res":"abc不可用","id":"3","age":"0"}]'; }else{ $info.='[{"res":"可用","id":"1","age":"15"},{"res":"可用","id":"83","age":"9"}]'; } echo $info;?>

效果图:

小编还为您整理了以下内容,可能对您也有帮助:

Ajax实现无刷新用户名检测(.net)

var xmlhttp="";

// 创建异步 对象 并判断浏览器

function getHTTPObject()

{

if(window.ActiveXObject)

{

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

}

else if(window.XMLHttpRequest)

{

xmlhttp=new XMLHttpRequest();

}

return xmlhttp;

}

// 检测用户是否存在

function CheckUserExist()

{

var _name=document.getElementById("NameTextBox").value;

if(document.getElementById("NameTextBox").value=="")

{

document.getElementById("NameMessage").innerHTML="4-12个字符(包括大小写字母、中文、数字、特殊符号等)1个汉字等于2个字符";

document.getElementById("NameMessage").style.color="#656565";

document.getElementById("NameMessage").style.fontSize="12px";

return false;

}

if(_name.length==0)

{

return false;

}else if(_name.length>=4 && _name.length<=12)

{

getHTTPObject();

xmlhttp.onreadystatechange=stateDO;

---------------------------\\交由页面进行处理判断是否重复

xmlhttp.open("get","Aspx/ExistsUsers.aspx?name="+escape(_name),true);

xmlhttp.send(null);

}else

{

var _nameMessage=document.getElementById("NameMessage");

_nameMessage.innerHTML="<img src='css/register/images/start.png' width='16px' height='16px' align='absmiddle'/> 用户名长度4-12字符";

_nameMessage.style.color="#2299dd";

return false;

}

}

//调用的方法

function stateDO()

{

var _nameMessage=document.getElementById("NameMessage");

if(xmlhttp.readystate==0 || xmlhttp.readystate==1 || xmlhttp.readystate==2 || xmlhttp.readystate==3)

{

_nameMessage.innerHTML="<img src='Css/register/images/qsd.gif'/>";

}

if(xmlhttp.readystate==4)

{

if(xmlhttp.status==200)

{

var info=xmlhttp.responseText;

if(info=="true")

{

_nameMessage.innerHTML="<img src='css/register/images/stop.png' width='16px' height='16px' align='absmiddle'/> 此用户名已被占用,请换一个!";

_nameMessage.style.color="#ee4040";

_nameBoole=false;

}else if(info=="false")

{

_nameMessage.innerHTML="<img src='css/register/images/right.png' width='16px' height='16px' align='absmiddle' /> 此用户名可用";

_nameMessage.style.color="#77dd22";

_nameBoole=true;

}

}

}

}

这是我以前写无刷新验证用户名的代码

希望能帮到你

求一个具体点的ajax+php+mysql做的无刷新验证用户名是否重复的代码,关键性的代码给出即可!

////////////////////////////////////user.html

<table>

<tr><td>

<form action="apply.php" method="post" name="apply">

用户名:<input name="username" type="text" onblur="check_user_exists(this.form)">

<span id="checkInfo"></span></td></tr><tr><td>

Email:<input name="Email" type="text">

</td></tr><tr><td>

密码:<input name="pass" type="password">

</td></tr><tr><td>

确认密码:<input name="pass2" type="password">

</td></tr><tr><td>

性别:<input name="sex" type="radio" value="0" checked>男

<input name="sex" type="radio" value="1">女

</td></tr><tr><td>

QQ:<input name="QQ" type="text">

</td></tr><tr><td>

电话:<input name="phone" type="text">

</td></tr><tr><td>

生日:<input name="birthday" type="text">

</td></tr><tr><td>

<input type="button" onclick=check()>

</form>

<script language=javascript>

function check_user_exists(form){

u_name=document.apply.username.value;

if (u_name==null||u_name==''){

alert("请您输入用户名");

return false;

}

infoBoard=document.getElementById("checkInfo");

infoBoard.innerHTML='查询中...';

myurl="checkuser.php?u_name="+u_name;

retCode=openUrl(myurl);

retCode=Number(retCode);

switch(retCode){

case -2:

infoBoard.innerHTML='<font color=red>抱歉</font>,查询失败';break;

case 1:

infoBoard.innerHTML='<font color=red>恭喜</font>,'+u_name+'可以使用';break;

case 0:

infoBoard.innerHTML='<font color=red>抱歉</font>,用户名'+u_name+'已经被使用';

}

return;

}

function openUrl(url){

var objxml=new ActiveXObject("Microsoft.XMLHttp")

objxml.open("GET",url,false);

objxml.send();

retInfo=objxml.responseText;

if (objxml.status=="200"){

return retInfo;

}

else{

return "-2";

}

}

</script>

////////////////////////////////////////////////////checkuser.php//////////////////

<?php

$u_name=$_GET["u_name"];

include("conn.inc");

mysql_query("set names gb2312");

$mysql_command=("SELECT * FROM bbs WHERE name='".$u_name."'");

$result=mysql_query($mysql_command)or die("fail".mysql_error);

if(mysql_fetch_array($result)!="")

echo "0";

else

echo "1";

?>

以前写的,两个文件,复制过去就行,有问题再提

在ASP.NET中利用Ajax技术实现无刷新检测用户名,responText无返回值,innerHTML总是显示“正在检测”。

function callServer() {

var u_name = document.getElementById("u_name").value;

if ((u_name == null) || (u_name == "")) return;

var url = "Checkuser.aspx?u_name=" + escape(u_name);

xmlHttp.open("GET", url, true);

xmlHttp.onreadystatechange = updatePage;

xmlHttp.send(null);

}

这里请求的地址需要绝对路径 比如http://www.baidu.com

而不能是相对的

瑞奇养生还为您提供以下相关内容希望对您有帮助:

Ajax实现无刷新用户名检测(.net)

_nameMessage.innerHTML="此用户名已被占用,请换一个!";_nameMessage.style.color="#ee4040";_nameBoole=false;}else if(info=="false"){ _nameMessage.innerHTML="此用户名可用";_nameMessage.style.color="#77dd...

ajax怎样做到不刷新

Ajax的原理就是:通过javascript的方式,将前台数据通过xmlhttp对象传递到后台,后台在接收到请求后,将需要的结果,再传回到前台,这样就可以实现不需要页面的回发,页是数据实现来回传递,从页实现无刷新。(全是自己的理解,...

Ajax 问题·无刷新验证用户名是否重复·为什么实现不了?求各位指点...

你这样先把所有username检索出来,然后做一下遍历匹配,debug试试。我觉得应该是你的sql 无法直接用中文匹配检索。

如何用ajax实现无刷新ASP用户登录页面

//判断用户是否存在 userControl_logon.userNameAndPasswordIsExist(u

求一个具体点的ajax+php+mysql做的无刷新验证用户名是否重复的代码,关 ...

用户名: Email: 密码: 确认密码: 性别:

ajax怎么实现实时验证功能

而异步指的是发出请求后,用户无需等待响应,一切由ajax来实现,无需进行刷新网页就可以局部更新数据。提高了俩端的沟通效率。来个小demo做一个无刷新验证表单的demo,在对话框中输入用户名,在后台进行验证,使用ajax技术。...

ajax实时无刷新提示

首先,这确实是Ajax技术(Flex技术也行)告诉你大致的思路,在用户购买一件商品时,调用一个你定义好的javascript函数,该函数将一个信息通过XmlHttpRequest对象传递给服务器端程序,比如就叫BuyServlet.Java(servlet配置自己定义...

一个用户登录界面 使用ajax实现了页面无刷新。 请问是怎么实现的 ,用...

Ajax就是局部刷新,以前的动态网页都是页面提交,然后整体刷新,一些已经解析到客户端的不需要在此从服务器端获取的数据都要再次获取生成,利用Ajax后,实现局部更新数据,局部提交,页面速度明显加快。最典型的一个Ajax例子就是...

用ASP+ACCESS如何实现“无刷新”验证用户名是否已存在?

所谓的无刷新 一般采用Ajax技术完成的像您所说的这样 实现用户名的验证 一般都采用Ajax技术 也就是一种异步技术。我只能和你说下实现的原理 如果要代码的话 我这里有一个曾经写过 可以验证的===在表单出 写个异步Jav...

ASP如何用Ajax实现无刷新读取数据库信息(后台发布信息,前台不刷新也...

//这是到后台获取数据的ajax方法 .ajax({ url: "要访问的地址",data: "参数名=参数值",success: function (msg) { //对返回值的处理 } });}, 5000);} 不过这有问题必须说明下,由于是刷新的且要定时更新,...

Top