php+ajax注册实时验证功能

前端技术 2023/09/06 PHP

ajax的实时验证技术已经很成熟了，在一些规范的网站上，如果有注册验证的模板，必定会涉及到ajax的无刷新验证，这在用户注册的体验中是很棒的，对比一个不能及时和后台无刷新对接的验证模式，要重新返回来刷新，这对于用户来说，体验上是很不友好的。

ajax的模式几乎是所有站点应用的需求，ajax作为前端无刷新验证，可以和所有后台语言进行组合使用，比如asp+ajax,php+ajax,.net+ajax等等组合，这里主要讲解的是php+ajax的注册验证。

下面的验证是一个完整的实例，我们在网站上面注册时，在输入用户名时，首先要进行无刷新验证，要验证一下后台数据库里面是否存在同名的数据，如果存在，则无刷新显示用户名已被占用的提示，这里一共涉及到四个文件。

ajax.js:ajax技术的核心文件了，主要是验证提示的时时显示，这个文件通常不需要进行修改，只需要进行前端调用即可。

var xmlHttp
function showHint(str)
{
if (str.length==0)
 { 
 document.getElementById(\"txtHint\").innerHTML=\"\"
 return
 }
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
 {
 alert (\"Browser does not support HTTP Request\")
 return
 } 
xmlHttp.onreadystatechange=stateChanged 

var geturl=\"conn.php?q=\"+str
//sid是增加一个随机数 防止页面启用缓存技术·
geturl=geturl+\"&sid=\"+Math.random()
geturl=encodeURI(geturl);
geturl=encodeURI(geturl); 
xmlHttp.open(\"GET\",geturl,true)
xmlHttp.send(null)
} 
function stateChanged() 
{ 
if (xmlHttp.readyState==4 || xmlHttp.readyState==\"complete\")
 { 
 document.getElementById(\"txtHint\").innerHTML=xmlHttp.responseText 
 } 
}
function GetXmlHttpObject()
{
var xmlHttp=null;
try
 {
 // Firefox, Opera 8.0+, Safari
 xmlHttp=new XMLHttpRequest();
 }
catch (e)
 {
 // Internet Explorer
 try
 {
 xmlHttp=new ActiveXObject(\"Msxml2.XMLHTTP\");
 }
 catch (e)
 {
 xmlHttp=new ActiveXObject(\"Microsoft.XMLHTTP\");
 }
 }
return xmlHttp;
}

conn.php:这是网站的配置文件，要配置好自己本地的mysql用户名和密码,需要配置PHP与数据库的连接,可以参考PHP+MYSQL数据库连接的文章,另外要处理接受过来的数据进行时实显示，如果有多项要验证的文件，在这里进行多项接受和验证即可。

<?php
$q=$_GET[\"q\"];
$q = urldecode($q);

if (strlen($q) > 0)
{
 $conn = @mysql_connect(\"localhost\",\"root\",\"1010\") or die (\"MySql连接错误\");
 mysql_select_db(\"xin\",$conn);
 mysql_query(\"set names \'utf8\'\");
 
 $sql = \"SELECT username FROM message WHERE username = \'$q\'\";
 $query = mysql_query($sql);
 @$row = mysql_fetch_array($query);
 
 if(!empty($row[\'username\']))
 {
 $response = \"<font color=red>已经被注册！</font>\";
 }else
 {
 $response = \"<font color=blue>恭喜！可以注册！</font>\";
 }
 
 echo $response;
}

?>

index.html:这就是前端文件了，这个文件相对来说要更简单一些，调用了ajax.js的处理文件,将要提交无刷新验证的文件提交到conn.php和后台进行连接。

<html>
<head>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\">
<script src=\"ajax.js\"></script> 
</head>
<body bgcolor=\"#999999\">
<center>
<form> 
<table>
 <tr>
 <td>用户名：</td>
 <td><input type=\"text\" id=\"txt1\" onKeyUp=\"showHint(this.value)\"></td>
 </tr>
 <tr align=\"center\">
 <td colspan=\"2\"><span id=\"txtHint\"></span></td>
 </tr>
</table>
</form>
</center>
</body>
</html>

库.txt:这个就是SQL的数据库文件了，将这个文件导入到mysql数据库中即可。

DROP DATABASE IF EXISTS `xin`;
CREATE DATABASE `xin` /*!40100 DEFAULT CHARACTER SET utf8 */;
USE `xin`;


CREATE TABLE `message` (
 `id` int(11) NOT NULL auto_increment,
 `username` varchar(20) default NULL,
 PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=2 DEFAULT CHARSET=utf8;

将这几个文件保存在可以运行PHP文件的根目录即可，测试网址为 localhost/index.html，下面是打包下载的整套文件，试着修改为自己需求的注册模块，比如加上密码，姓名之类的。

源码下载：http://xiazai.phpstudy.net/201607/yuanma/php+ajaxzhuce(phpstudy.net).rar

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持phpstudy。

本文地址：https://www.stayed.cn/item/17589

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案