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面向对象编程快速入门
Oct 09 PHP
php中根据变量的类型 选择echo或dump
Jul 05 PHP
php仿QQ验证码的实例分析
Jul 01 PHP
php字符串截取函数用法分析
Nov 25 PHP
php中删除数组的第一个元素和最后一个元素的函数
Mar 07 PHP
php实现数组中索引关联数据转换成json对象的方法
Jul 08 PHP
两款万能的php分页类
Nov 12 PHP
标准版Eclipse搭建PHP环境的详细步骤
Nov 18 PHP
详解PHP的Yii框架中的Controller控制器
Mar 29 PHP
总结PHP代码规范、流程规范、git规范
Jun 18 PHP
PHP实现用session来实现记录用户登陆信息
Oct 15 PHP
laravel中的一些简单实用功能
Nov 03 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缓存机制Output Control详解
2014/07/14 PHP
PHP实现通过正则表达式替换回调的内容标签
2015/06/15 PHP
php基于闭包实现函数的自调用(递归)实例分析
2016/11/11 PHP
javascript 写的一个简单的timer
2009/07/30 Javascript
html超链接打开窗口大小的方法
2013/03/05 Javascript
js如何取消事件冒泡
2013/09/23 Javascript
基于AngularJS+HTML+Groovy实现登录功能
2016/02/17 Javascript
Three.js学习之Lamber材质和Phong材质
2016/08/04 Javascript
Node.js开启Https的实践详解
2016/10/25 Javascript
jQuery使用ajax方法解析返回的json数据功能示例
2017/01/10 Javascript
快速解决select2在bootstrap模态框中下拉框隐藏的问题
2018/08/10 Javascript
elementUI Vue 单个按钮显示和隐藏的变换功能(两种方法)
2018/09/04 Javascript
Vue-不允许嵌套式的渲染方法
2018/09/13 Javascript
移动端H5页面返回并刷新页面(BFcache)的方法
2018/11/06 Javascript
vue自定义表单生成器form-create使用详解
2019/07/19 Javascript
微信小程序用户授权弹窗 拒绝时引导用户重新授权实现
2019/07/29 Javascript
ES2020系列之空值合并运算符 '??'
2020/07/22 Javascript
浅析JavaScript中的事件委托机制跟深浅拷贝
2021/01/20 Javascript
python去除文件中空格、Tab及回车的方法
2016/04/12 Python
Python字符串格式化输出方法分析
2016/04/13 Python
Python实现的单向循环链表功能示例
2017/11/10 Python
Tornado Web Server框架编写简易Python服务器
2018/07/28 Python
详解python的argpare和click模块小结
2019/03/31 Python
Python实现FTP文件传输的实例
2019/07/07 Python
Python中pyecharts安装及安装失败的解决方法
2020/02/18 Python
python with语句的原理与用法详解
2020/03/30 Python
CSS3径向渐变之大鱼吃小鱼之孤单的大鱼
2016/04/26 HTML / CSS
欧洲最大的婴幼儿服装及内衣公司:Petit Bateau(小帆船)
2016/08/16 全球购物
Staples加拿大官方网站:办公用品一站式采购
2016/09/25 全球购物
玩具公司的创业计划书
2013/12/31 职场文书
2014年学习全国道德模范事迹思想汇报
2014/09/15 职场文书
毕业论文答辩开场白
2015/05/27 职场文书
导游词之河北白洋淀
2020/01/15 职场文书
Python包管理工具pip的15 个使用小技巧
2021/05/17 Python
详解Python描述符的工作原理
2021/06/11 Python
Mysql数据库值的添加、修改、删除及清空操作实例
2021/06/20 MySQL