php+ajax注册实时验证功能


Posted in PHP onJuly 20, 2016

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.3water.com/201607/yuanma/php+ajaxzhuce(3water.com).rar

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

PHP 相关文章推荐
上传多个文件的PHP脚本
Nov 26 PHP
Dedecms常用函数解析
Feb 01 PHP
10个可以简化php开发过程的MySQL工具
Apr 11 PHP
PHP统计二维数组元素个数的方法
Nov 12 PHP
PHP采用get获取url汉字出现乱码的解决方法
Nov 13 PHP
Yii学习总结之安装配置
Feb 22 PHP
php实现的mongodb操作类实例
Apr 03 PHP
php实现QQ空间获取当前用户的用户名并生成图片
Jul 25 PHP
PHP验证码生成原理和实现
Jan 24 PHP
PHP使用http_build_query()构造URL字符串的方法
Apr 02 PHP
PHP is_array() 检测变量是否是数组的实现方法
Jun 13 PHP
详谈PHP程序Laravel 5框架的优化技巧
Jul 18 PHP
PHP实现的随机IP函数【国内IP段】
Jul 20 #PHP
Zend Framework教程之Zend_Helpers动作助手ViewRenderer用法详解
Jul 20 #PHP
php+flash+jQuery多图片上传源码分享
Jul 27 #PHP
php安装ssh2扩展的方法【Linux平台】
Jul 20 #PHP
值得分享的php+ajax实时聊天室
Jul 20 #PHP
php验证身份证号码正确性的函数
Jul 20 #PHP
PHP加密解密类实例代码
Jul 20 #PHP
You might like
PHP中实现中文字符进制转换原理分析
2011/12/06 PHP
PHP has encountered a Stack overflow问题解决方法
2014/11/03 PHP
thinkPHP中分页用法实例分析
2015/12/26 PHP
PHP基于redis计数器类定义与用法示例
2018/02/08 PHP
php格式文件打开的四种方法
2018/02/24 PHP
javascript 建设银行登陆键盘
2008/06/10 Javascript
jQuery 跨域访问问题解决方法
2009/12/02 Javascript
妙用Jquery的val()方法
2012/06/27 Javascript
js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动)
2013/12/11 Javascript
js对table的td进行相同内容合并示例详解
2013/12/27 Javascript
javascript解决IE6下hover问题的方法
2015/07/28 Javascript
IE6-IE9使用JSON、table.innerHTML所引发的问题
2015/12/22 Javascript
JS获取地址栏参数的两种方法(简单实用)
2016/06/14 Javascript
Vue实现左右菜单联动实现代码
2018/08/12 Javascript
js获取url页面id,也就是最后的数字文件名
2020/09/25 Javascript
Openlayers实现地图的基本操作
2020/09/28 Javascript
50行代码实现贪吃蛇(具体思路及代码)
2013/04/27 Python
全面解读Python Web开发框架Django
2014/06/30 Python
python实现复制整个目录的方法
2015/05/12 Python
Python求两个文本文件以行为单位的交集、并集与差集的方法
2015/06/17 Python
使用python判断你是青少年还是老年人
2018/11/29 Python
python的scipy实现插值的示例代码
2019/11/12 Python
解决pyshp UnicodeDecodeError的问题
2019/12/06 Python
在 Python 中使用 7zip 备份文件的操作
2020/12/11 Python
Oracle快照(snapshot)
2015/03/13 面试题
鞋类设计与工艺专业销售求职信
2013/11/01 职场文书
冰淇淋店的创业计划书
2014/02/07 职场文书
作文评语大全
2014/04/23 职场文书
党的群众路线教育实践活动查摆剖析材料
2014/10/10 职场文书
学生抄作业检讨书(2篇)
2014/10/17 职场文书
2015年社区纪检工作总结
2015/04/21 职场文书
大学组织委员竞选稿
2015/11/21 职场文书
学校团代会开幕词
2016/03/04 职场文书
golang中切片copy复制和等号复制的区别介绍
2021/04/27 Golang
mysql中数据库覆盖导入的几种方式总结
2022/03/25 MySQL
JS前端canvas交互实现拖拽旋转及缩放示例
2022/08/05 Javascript