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 相关文章推荐
第三节 定义一个类 [3]
Oct 09 PHP
PHP警告Cannot use a scalar value as an array的解决方法
Jan 11 PHP
PHP连接SQLServer2005的实现方法(附ntwdblib.dll下载)
Jul 02 PHP
二进制交叉权限微型php类分享
Feb 07 PHP
初识ThinkPHP控制器
Apr 07 PHP
PHP实现链式操作的三种方法详解
Nov 16 PHP
tp框架(thinkPHP)实现三次登陆密码错误之后锁定账号功能示例
May 24 PHP
php curl发送请求实例方法
Aug 01 PHP
laravel框架之数据库查出来的对象实现转化为数组
Oct 23 PHP
PHP使用POP3读取邮箱接收邮件的示例代码
Jul 08 PHP
PHPStorm2020.1永久激活及下载更新至2020(推荐)
Sep 25 PHP
用php实现分页效果的示例代码
Dec 10 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
德生9700DX电路分析
2021/03/02 无线电
php下把数组保存为文件格式的实例应用
2010/02/08 PHP
yii框架builder、update、delete使用方法
2014/04/30 PHP
php+mysqli预处理技术实现添加、修改及删除多条数据的方法
2015/01/30 PHP
PHP学习笔记(三):数据类型转换与常量介绍
2015/04/17 PHP
PHP For循环字母A-Z当超过26个字母时输出AA,AB,AC
2020/02/16 PHP
web前端开发也需要日志
2010/12/09 Javascript
Javascript中的匿名函数与封装介绍
2015/03/15 Javascript
JS基于构造函数实现的菜单滑动显隐效果【测试可用】
2016/06/21 Javascript
js实现图片360度旋转
2017/01/22 Javascript
js 数据存储和DOM编程
2017/02/09 Javascript
p5.js入门教程和基本形状绘制
2018/03/15 Javascript
JavaScript封装的常用工具类库bee.js用法详解【经典类库】
2018/09/03 Javascript
webpack开发环境和生产环境的深入理解
2018/11/08 Javascript
js删除对象/数组中null、undefined、空对象及空数组方法示例
2018/11/14 Javascript
JavaScript时间与时间戳的转换操作实例分析
2018/12/07 Javascript
Vue表情输入组件 微信face表情组件
2019/02/11 Javascript
使用easyui从servlet传递json数据到前端页面的两种方法
2019/09/05 Javascript
vuex实现像调用模板方法一样调用Mutations方法
2019/11/06 Javascript
javascript实现切割轮播效果
2019/11/28 Javascript
基于JQuery实现页面定时弹出广告
2020/05/08 jQuery
深入了解JavaScript词法作用域
2020/07/29 Javascript
[02:41]DOTA2亚洲邀请赛小组赛第三日 赛事回顾
2015/02/01 DOTA
结合Python的SimpleHTTPServer源码来解析socket通信
2016/06/27 Python
python利用插值法对折线进行平滑曲线处理
2018/12/25 Python
Django 1.10以上版本 url 配置注意事项详解
2019/08/05 Python
python中从for循环延申到推导式的具体使用
2019/11/29 Python
使用python的turtle函数绘制一个滑稽表情
2020/02/28 Python
Python 基于jwt实现认证机制流程解析
2020/06/22 Python
西班牙第一的网上药房:PromoFarma.com
2017/04/17 全球购物
《长城》教学反思
2014/02/14 职场文书
2015年安康杯竞赛活动总结
2015/03/26 职场文书
力克胡哲观后感
2015/06/10 职场文书
幼儿园科学课教学反思
2016/03/03 职场文书
干货:如何写好观后感 !
2019/05/21 职场文书
nginx服务器的下载安装与使用详解
2021/08/02 Servers