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 相关文章推荐
打造计数器DIY三步曲(上)
Oct 09 PHP
PHP中常用数组处理方法实例分析
Aug 30 PHP
PHP中文处理 中文字符串截取(mb_substr)和获取中文字符串字数
Nov 10 PHP
PHP中数组的三种排序方法分享
May 07 PHP
PHP中::、-&amp;gt;、self、$this几种操作符的区别介绍
Apr 24 PHP
php中apc缓存使用示例
Dec 25 PHP
ThinkPHP中Session用法详解
Nov 29 PHP
19个Android常用工具类汇总
Dec 30 PHP
PHP实现简单的新闻发布系统实例
Jul 28 PHP
基于PHP实现的多元线性回归模拟曲线算法
Jan 30 PHP
win7 wamp 64位 php环境开启curl服务遇到的问题及解决方法
Sep 16 PHP
PHP过滤器 filter_has_var() 函数用法实例分析
Apr 23 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实现paypal整合方法
2010/11/28 PHP
PHP冒泡排序算法代码详细解读
2011/07/17 PHP
javascript 二分法(数组array)
2010/04/24 Javascript
JS字符串截取函数实例
2013/12/27 Javascript
浏览器缩放检测的js代码
2014/09/28 Javascript
jquery分析文本里url或邮件地址为真实链接的方法
2015/06/20 Javascript
12个超实用的JQuery代码片段
2015/11/02 Javascript
延时加载JavaScript代码提高速度
2015/12/27 Javascript
基于jquery实现下拉框美化特效
2016/02/02 Javascript
微信小程序 textarea 详解及简单使用方法
2016/12/05 Javascript
js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示实例
2016/12/06 Javascript
深入学习Bootstrap表单
2016/12/13 Javascript
Bootstrap table 定制提示语的加载过程
2017/02/20 Javascript
Vue获取DOM元素样式和样式更改示例
2017/03/07 Javascript
vue2 设置router-view默认路径的实例
2018/09/20 Javascript
手把手教你如何使用nodejs编写cli命令行
2018/11/05 NodeJs
微信小程序实现简单表格
2019/02/14 Javascript
layUI实现前端分页和后端分页
2019/07/27 Javascript
Vue 集成 PDF.js 实现 PDF 预览和添加水印的步骤
2021/01/22 Vue.js
[00:32]2018DOTA2亚洲邀请赛出场——LGD
2018/04/04 DOTA
[01:52]PWL S2开团时刻第四期——DOTA2成语故事
2020/12/03 DOTA
如何解决django配置settings时遇到Could not import settings 'conf.local'
2014/11/18 Python
tensorflow获取变量维度信息
2018/03/10 Python
pandas 把数据写入txt文件每行固定写入一定数量的值方法
2018/12/28 Python
Python中numpy模块常见用法demo实例小结
2019/03/16 Python
Python字典中的值为列表或字典的构造实例
2019/12/16 Python
HTML5之SVG 2D入门11—用户交互性(动画)介绍及应用
2013/01/30 HTML / CSS
日本必酷网络直营店:Biccamera
2019/03/23 全球购物
Travelstart沙特阿拉伯:廉价航班、豪华酒店和实惠的汽车租赁优惠
2019/04/06 全球购物
Wolford法国官网:奥地利奢侈内衣品牌
2020/08/11 全球购物
教师新年寄语
2014/04/03 职场文书
个人贷款收入证明
2014/10/26 职场文书
重阳节座谈会主持词
2015/07/03 职场文书
英语版自我评价,35句话轻松搞定
2019/10/08 职场文书
Python生成九宫格图片的示例代码
2021/04/14 Python
python tqdm用法及实例详解
2021/06/16 Python