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 相关文章推荐
IIS环境下快速安装、配置和调试PHP5.2.0
Dec 17 PHP
用来解析.htpasswd文件的PHP类
Sep 05 PHP
解析mysql中UNIX_TIMESTAMP()函数与php中time()函数的区别
Jun 24 PHP
php保存二进制原始数据为图片的程序代码
Oct 14 PHP
PHP也能干大事 随机函数
Apr 14 PHP
PHP通过API获取手机号码归属地
May 28 PHP
php简单图像创建入门实例
Jun 10 PHP
Yii2搭建后台并实现rbac权限控制完整实例教程
Apr 28 PHP
php版阿里云OSS图片上传类详解
Dec 01 PHP
微信公众号OAuth2.0网页授权问题浅析
Jan 21 PHP
php使用PDO事务配合表格读取大量数据插入操作实现方法
Feb 16 PHP
PHP简单实现遍历目录下特定文件的方法小结
May 22 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使用GD实现颜色渐变实例
2015/06/02 PHP
web 页面分页打印的实现
2009/06/22 Javascript
javascript之typeof、instanceof操作符使用探讨
2013/05/19 Javascript
yepnope.js使用详解及示例分享
2014/06/23 Javascript
javascript插件开发的一些感想和心得
2016/02/28 Javascript
jQuery实现点击后高亮背景固定显示的菜单效果【附demo源码下载】
2016/09/21 Javascript
原生JS简单实现ajax的方法示例
2016/11/29 Javascript
vue 打包后的文件部署到express服务器上的方法
2017/08/09 Javascript
Web技术实现移动监测的介绍
2017/09/18 Javascript
JavaScript的setter与getter方法
2017/11/29 Javascript
vue 配置多页面应用的示例代码
2018/10/22 Javascript
vue-cli3全面配置详解
2018/11/14 Javascript
微信公众平台 客服接口发消息的实现代码(Java接口开发)
2019/04/17 Javascript
怎么使用javascript深度拷贝一个数组
2019/06/06 Javascript
vue+element-ui+axios实现图片上传
2019/08/20 Javascript
java实现单链表增删改查的实例代码详解
2019/08/30 Javascript
vue中js判断长时间不操作界面自动退出登录(推荐)
2020/01/22 Javascript
vue项目使用高德地图的定位及关键字搜索功能的实例代码(踩坑经验)
2020/03/07 Javascript
[01:44]《为梦想出发》—联想杯DOTA2完美世界全国高校联赛
2015/09/30 DOTA
python使用自定义user-agent抓取网页的方法
2015/04/15 Python
举例讲解Python设计模式编程的代理模式与抽象工厂模式
2016/01/16 Python
python与C、C++混编的四种方式(小结)
2019/07/15 Python
python实现抠图给证件照换背景源码
2019/08/20 Python
Python 词典(Dict) 加载与保存示例
2019/12/06 Python
Python经纬度坐标转换为距离及角度的实现
2020/11/01 Python
Python 利用argparse模块实现脚本命令行参数解析
2020/12/28 Python
英国著名的美容护肤和护发产品购物网站:Lookfantastic
2020/11/23 全球购物
办公室秘书岗位职责范本
2014/02/11 职场文书
2014年银行员工工作总结
2014/11/12 职场文书
同学聚会通知书
2015/04/20 职场文书
校运会通讯稿
2015/07/18 职场文书
离婚财产分割协议书
2015/08/11 职场文书
HR必备:超全面的薪酬待遇管理方案!
2019/07/12 职场文书
深入理解redis中multi与pipeline
2021/06/02 Redis
Vue elementUI表单嵌套表格并对每行进行校验详解
2022/02/18 Vue.js
Li list-style-image 图片垂直居中实现方法
2023/05/21 HTML / CSS