php+ajax注册实时验证功能
ajax的实时验证技术已经很成熟了,在一些规范的网站上,如果有注册验证的模板,必定会涉及到ajax的无刷新验证,这在用户注册的体验中是很棒的,对比一个不能及时和后台无刷新对接的验证模式,要重新返回来刷新,这对于用户来说,体验上是很不友好的。
ajax的模式几乎是所有站点应用的需求,ajax作为前端无刷新验证,可以和所有后台语言进行组合使用,比如asp+ajax,php+ajax,.net+ajax等等组合,这里主要讲解的是php+ajax的注册验证。
下面的验证是一个完整的实例,我们在网站上面注册时,在输入用户名时,首先要进行无刷新验证,要验证一下后台数据库里面是否存在同名的数据,如果存在,则无刷新显示用户名已被占用的提示,这里一共涉及到四个文件。
ajax.js:ajax技术的核心文件了,主要是验证提示的时时显示,这个文件通常不需要进行修改,只需要进行前端调用即可。
varxmlHttp functionshowHint(str) { if(str.length==0) { document.getElementById("txtHint").innerHTML="" return } xmlHttp=GetXmlHttpObject() if(xmlHttp==null) { alert("BrowserdoesnotsupportHTTPRequest") return } xmlHttp.onreadystatechange=stateChanged vargeturl="conn.php?q="+str //sid是增加一个随机数防止页面启用缓存技术· geturl=geturl+"&sid="+Math.random() geturl=encodeURI(geturl); geturl=encodeURI(geturl); xmlHttp.open("GET",geturl,true) xmlHttp.send(null) } functionstateChanged() { if(xmlHttp.readyState==4||xmlHttp.readyState=="complete") { document.getElementById("txtHint").innerHTML=xmlHttp.responseText } } functionGetXmlHttpObject() { varxmlHttp=null; try { //Firefox,Opera8.0+,Safari xmlHttp=newXMLHttpRequest(); } catch(e) { //InternetExplorer try { xmlHttp=newActiveXObject("Msxml2.XMLHTTP"); } catch(e) { xmlHttp=newActiveXObject("Microsoft.XMLHTTP"); } } returnxmlHttp; }
conn.php:这是网站的配置文件,要配置好自己本地的mysql用户名和密码,需要配置PHP与数据库的连接,可以参考PHP+MYSQL数据库连接的文章,另外要处理接受过来的数据进行时实显示,如果有多项要验证的文件,在这里进行多项接受和验证即可。
<?php $q=$_GET["q"]; $q=urldecode($q); if(strlen($q)>0) { $conn=@mysql_connect("localhost","root","1010")ordie("MySql连接错误"); mysql_select_db("xin",$conn); mysql_query("setnames'utf8'"); $sql="SELECTusernameFROMmessageWHEREusername='$q'"; $query=mysql_query($sql); @$row=mysql_fetch_array($query); if(!empty($row['username'])) { $response="<fontcolor=red>已经被注册!</font>"; }else { $response="<fontcolor=blue>恭喜!可以注册!</font>"; } echo$response; } ?>
index.html:这就是前端文件了,这个文件相对来说要更简单一些,调用了ajax.js的处理文件,将要提交无刷新验证的文件提交到conn.php和后台进行连接。
<html> <head> <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"> <scriptsrc="ajax.js"></script> </head> <bodybgcolor="#999999"> <center> <form> <table> <tr> <td>用户名:</td> <td><inputtype="text"id="txt1"onKeyUp="showHint(this.value)"></td> </tr> <tralign="center"> <tdcolspan="2"><spanid="txtHint"></span></td> </tr> </table> </form> </center> </body> </html>
库.txt:这个就是SQL的数据库文件了,将这个文件导入到mysql数据库中即可。
DROPDATABASEIFEXISTS`xin`; CREATEDATABASE`xin`/*!40100DEFAULTCHARACTERSETutf8*/; USE`xin`; CREATETABLE`message`( `id`int(11)NOTNULLauto_increment, `username`varchar(20)defaultNULL, PRIMARYKEY(`id`) )ENGINE=InnoDBAUTO_INCREMENT=2DEFAULTCHARSET=utf8;
将这几个文件保存在可以运行PHP文件的根目录即可,测试网址为localhost/index.html,下面是打包下载的整套文件,试着修改为自己需求的注册模块,比如加上密码,姓名之类的。
源码下载:http://xiazai.jb51.net/201607/yuanma/php+ajaxzhuce(jb51.net).rar
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。