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 相关文章推荐
用户的详细注册和判断
Oct 09 PHP
让你同时上传 1000 个文件 (一)
Oct 09 PHP
Zend Studio 无法启动的问题解决方法
Dec 04 PHP
php关于array_multisort多维数组排序的使用说明
Jan 04 PHP
php学习之数据类型之间的转换介绍
Jun 09 PHP
解决phpmyadmin中缺少mysqli扩展问题的方法
May 06 PHP
php下pdo的mysql事务处理用法实例
Dec 27 PHP
PHP常见的6个错误提示及解决方法
Jul 07 PHP
php flush无效,IIS7下php实时输出的方法
Aug 25 PHP
CI框架无限级分类+递归的实现代码
Nov 01 PHP
php 截取GBK文档某个位置开始的n个字符方法
Mar 08 PHP
PHP从零开始打造自己的MVC框架之路由类实现方法分析
Jun 03 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
咖啡界又出新概念,无需咖啡豆的分子咖啡
2021/03/03 咖啡文化
用PHP的超级变量$_GET获取HTML表单(Form) 数据
2011/05/07 PHP
PHP中单例模式与工厂模式详解
2017/02/17 PHP
PHP实现的贪婪算法实例
2017/10/17 PHP
通过 Dom 方法提高 innerHTML 性能
2008/03/26 Javascript
慎用 somefunction.prototype 分析
2009/06/02 Javascript
JS 控制CSS样式表
2009/08/20 Javascript
struts2+jquery+json实现异步加载数据(自写)
2013/06/24 Javascript
js Array操作的最简短最容易理解方法
2013/12/09 Javascript
原生javascript实现图片弹窗交互效果
2015/01/12 Javascript
基于JS实现移动端访问PC端页面时跳转到对应的移动端网页
2020/12/24 Javascript
Highcharts+NodeJS搭建数据可视化平台示例
2017/01/01 NodeJs
JavaScript实现水平进度条拖拽效果
2017/01/18 Javascript
JavaScript实现两个select下拉框选项左移右移
2017/03/09 Javascript
微信小程序实现滑动删除效果
2017/05/19 Javascript
使用MUI框架模拟手机端的下拉刷新和上拉加载功能
2017/09/04 Javascript
Node.js模块全局安装路径配置方法
2018/05/17 Javascript
vue.js使用v-if实现显示与隐藏功能示例
2018/07/06 Javascript
jQuery实现简单的Ajax调用功能示例
2019/02/15 jQuery
DatePickerDialog 自定义样式及使用全解
2019/07/09 Javascript
[02:29]完美世界高校联赛上海赛区回顾
2015/12/15 DOTA
Python利用BeautifulSoup解析Html的方法示例
2017/07/30 Python
Python给你的头像加上圣诞帽
2018/01/04 Python
解决pycharm每次新建项目都要重新安装一些第三方库的问题
2019/01/17 Python
详解用Python练习画个美队盾牌
2019/03/23 Python
对Python中一维向量和一维向量转置相乘的方法详解
2019/08/26 Python
Python使用monkey.patch_all()解决协程阻塞问题
2020/04/15 Python
澳大利亚二手奢侈品网站:Modsie
2019/09/23 全球购物
什么是事务?事务有哪些性质?
2012/03/11 面试题
演讲比赛获奖感言
2014/02/02 职场文书
岗位职责说明书
2014/05/07 职场文书
补充协议书
2015/01/28 职场文书
销售区域经理岗位职责
2015/04/10 职场文书
党员进社区活动总结
2015/05/07 职场文书
《小乌鸦爱妈妈》教学反思
2016/02/19 职场文书
SpringBoot整合阿里云视频点播的过程详解
2021/12/06 Java/Android