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编程最快明白》第三讲:php数组
Nov 01 PHP
从手册去理解分析PHP session机制
Jul 17 PHP
php存储过程调用实例代码
Feb 03 PHP
php 验证码(倾斜,正弦干扰线,黏贴,旋转)
Jun 29 PHP
浅谈discuz密码加密的方式
May 22 PHP
如何让CI框架支持service层
Oct 29 PHP
php curl 上传文件代码实例
Apr 27 PHP
PHP会员找回密码功能的简单实现
Sep 05 PHP
php添加数据到xml文件的简单例子
Sep 08 PHP
详解thinkphp中的volist标签
Jan 15 PHP
PHP+Ajax简单get验证操作示例
Mar 02 PHP
PHP命名空间定义与用法实例分析
Aug 14 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+mysql一个名片库程序
2006/10/09 PHP
php 用sock技术发送邮件的函数
2007/07/21 PHP
PHP获取短链接跳转后的真实地址和响应头信息的方法
2014/07/25 PHP
Yii实现多数据库主从读写分离的方法
2014/12/29 PHP
Yii rules常用规则示例
2016/03/15 PHP
jquery 列表双向选择器之改进版
2013/08/09 Javascript
JS检测图片大小的实例
2013/08/21 Javascript
jQuery实现精美的多级下拉菜单特效
2015/03/14 Javascript
原生JavaScript实现动态省市县三级联动下拉框菜单实例代码
2016/02/03 Javascript
jQuery Validate 相关参数及常用的自定义验证规则
2017/03/06 Javascript
基于Bootstrap模态对话框只加载一次 remote 数据的解决方法
2017/07/09 Javascript
AngularJS使用ng-repeat遍历二维数组元素的方法详解
2017/11/11 Javascript
基于D3.js实现时钟效果
2018/07/17 Javascript
nodejs微信开发之自动回复的实现
2019/03/17 NodeJs
node基于async/await对mysql进行封装
2019/06/20 Javascript
JavaScript享元模式原理与用法实例详解
2020/03/09 Javascript
JavaScript中跨域问题的深入理解
2021/03/04 Javascript
Python开发SQLite3数据库相关操作详解【连接,查询,插入,更新,删除,关闭等】
2017/07/27 Python
tensorflow入门之训练简单的神经网络方法
2018/02/26 Python
python求质数的3种方法
2018/09/28 Python
Python Pexpect库的简单使用方法
2019/01/29 Python
对python中if语句的真假判断实例详解
2019/02/18 Python
python调用摄像头拍摄数据集
2019/06/01 Python
Python button选取本地图片并显示的实例
2019/06/13 Python
python面试题之列表声明实例分析
2019/07/08 Python
pandas DataFrame的修改方法(值、列、索引)
2019/08/02 Python
深入理解Tensorflow中的masking和padding
2020/02/24 Python
两种CSS3伪类选择器详细介绍
2013/12/24 HTML / CSS
纽约家具、家居装饰和地毯店:ABC Carpet & Home
2017/06/21 全球购物
Easy Spirit官网:美国休闲鞋履中的代表品牌
2019/04/12 全球购物
超市仓管员岗位职责范本
2014/09/18 职场文书
党的群众路线教育实践活动调研报告
2014/11/03 职场文书
2015年度信用社工作总结
2015/05/04 职场文书
教师节领导致辞
2015/07/29 职场文书
总结一些Java常用的加密算法
2021/06/11 Java/Android
python脚本框架webpy的url映射详解
2021/11/20 Python