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和XSS跨站攻击的防范
Apr 17 PHP
php下获取Discuz论坛登录用户名、用户组、用户ID等信息的实现代码
Dec 29 PHP
Array of country list in PHP with Zend Framework
Oct 17 PHP
深入for,while,foreach遍历时间比较的详解
Jun 08 PHP
PHP按行读取文件时删除换行符的3种方法
May 04 PHP
ThinkPHP开发框架函数详解:C方法
Aug 14 PHP
基于PHP实现通过照片获取ip地址
Apr 26 PHP
PHP在线打包下载功能示例
Oct 15 PHP
PHP获取当前执行php文件名的代码
Mar 02 PHP
PHP PDO操作MySQL基础教程
Jun 05 PHP
PHP策略模式定义与用法示例
Jul 27 PHP
PHP实用小技巧之调用录像的方法
Dec 05 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/01/17 PHP
两种设置php载入页面时编码的方法
2014/07/29 PHP
PHP 接入微信扫码支付总结(总结篇)
2016/11/03 PHP
php获取客户端IP及URL的方法示例
2017/02/03 PHP
不错的一个日期输入 动态
2006/11/06 Javascript
jquery的选择器的使用技巧之如何选择input框
2013/09/22 Javascript
不同Jquery版本引发的问题解决
2013/10/14 Javascript
jquery用offset()方法获得元素的xy坐标
2014/09/06 Javascript
浅析jQuery中使用$所引发的问题
2016/05/29 Javascript
JavaScript基础语法之js表达式
2016/06/07 Javascript
JS实现快速比较两个字符串中包含有相同数字的方法
2017/09/11 Javascript
图片加载完成再执行事件的实例
2017/11/16 Javascript
浅谈 Vue 项目优化的方法
2017/12/16 Javascript
JS中原始值和引用值的储存方式示例详解
2018/03/23 Javascript
原生js检测页面加载完毕的实例
2018/09/11 Javascript
Vue使用axios出现options请求方法
2019/05/30 Javascript
详解vuex数据传输的两种方式及this.$store undefined的解决办法
2019/08/26 Javascript
[49:42]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#2Secret VS EG第一局
2016/03/04 DOTA
Python采用raw_input读取输入值的方法
2014/08/18 Python
python入门教程之识别验证码
2017/03/04 Python
go和python变量赋值遇到的一个问题
2017/08/31 Python
python全栈要学什么 python全栈学习路线
2019/06/28 Python
django 微信网页授权认证api的步骤详解
2019/07/30 Python
Python pandas RFM模型应用实例详解
2019/11/20 Python
python seaborn heatmap可视化相关性矩阵实例
2020/06/03 Python
HTML5 File API改善网页上传功能
2009/08/19 HTML / CSS
BONIA波尼亚新加坡官网:皮革手袋,鞋类和配件
2016/08/25 全球购物
测试时代收集的软件测试面试题
2013/09/25 面试题
表扬信格式
2014/01/12 职场文书
护理专业毕业生自我鉴定总结
2014/03/24 职场文书
小学英语教师先进事迹
2014/05/28 职场文书
党的群众路线教育实践活动对照检查材料(四风)
2014/09/27 职场文书
计算机实训报告总结
2014/11/05 职场文书
Python 读写 Matlab Mat 格式数据的操作
2021/05/19 Python
Python中else的三种使用场景
2021/06/16 Python
WINDOWS下安装mysql 8.x 的方法图文教程
2022/04/19 MySQL