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 session有效期session.gc_maxlifetime
Apr 20 PHP
PHP实现异步调用方法研究与分享
Oct 27 PHP
php数组函数序列之end() - 移动数组内部指针到最后一个元素,并返回该元素的值
Oct 31 PHP
php 搜索框提示(自动完成)实例代码
Feb 05 PHP
php事务处理实例详解
Jul 11 PHP
PHP使用xmllint命令处理xml与html的方法
Dec 15 PHP
php使用cookie显示用户上次访问网站日期的方法
Jan 26 PHP
CodeIgniter使用smtp服务发送html邮件的方法
Jun 10 PHP
ThinkPHP在Cli模式下使用模板引擎的方法
Sep 25 PHP
laravel 5异常错误:FatalErrorException in Handler.php line 38的解决
Oct 12 PHP
php+croppic.js实现剪切上传图片功能
Aug 14 PHP
PHP code 验证码生成类定义和简单使用示例
May 27 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
提高define性能的php扩展hidef的安装和使用
2011/06/14 PHP
ThinkPHP路由机制简介
2016/03/23 PHP
PHP实现从PostgreSQL数据库检索数据分页显示及根据条件查找数据示例
2018/06/09 PHP
一种JavaScript的设计模式
2006/11/22 Javascript
javascript new一个对象的实质
2010/01/07 Javascript
JS+CSS实现感应鼠标渐变显示DIV层的方法
2015/02/20 Javascript
EasyUI中实现form表单提交的示例分享
2015/03/01 Javascript
js实现的奥运倒计时时钟效果代码
2015/12/09 Javascript
ReactNative页面跳转实例代码
2016/09/27 Javascript
老生常谈Bootstrap媒体对象
2017/07/06 Javascript
Vue利用路由钩子token过期后跳转到登录页的实例
2017/10/26 Javascript
Vue 组件传值几种常用方法【总结】
2018/05/28 Javascript
VUE解决微信签名及SPA微信invalid signature问题(完美处理)
2019/03/29 Javascript
JavaScript如何获取一个元素的样式信息
2019/07/29 Javascript
element-ui中el-upload多文件一次性上传的实现
2020/12/02 Javascript
Python爬取读者并制作成PDF
2015/03/10 Python
python实现JAVA源代码从ANSI到UTF-8的批量转换方法
2015/08/10 Python
wxpython中自定义事件的实现与使用方法分析
2016/07/21 Python
Python中的字符串操作和编码Unicode详解
2017/01/18 Python
python使用os.listdir和os.walk获得文件的路径的方法
2017/12/16 Python
python自定义线程池控制线程数量的示例
2019/02/22 Python
flask开启多线程的具体方法
2020/08/02 Python
HTML5实现应用程序缓存(Application Cache)
2020/06/16 HTML / CSS
Giglio俄罗斯奢侈品购物网:男士、女士、儿童高级时装
2018/07/27 全球购物
测绘工程本科生求职信
2013/10/10 职场文书
会计毕业生自我鉴定
2013/11/04 职场文书
商场促销活动总结
2014/07/10 职场文书
2015年党风建设工作总结
2015/04/29 职场文书
本科毕业论文致谢词
2015/05/14 职场文书
信仰纪录片观后感
2015/06/08 职场文书
2016年母亲节寄语
2015/12/04 职场文书
七个Python必备的GUI库
2021/04/27 Python
Python机器学习之基于Pytorch实现猫狗分类
2021/06/08 Python
Python标准库pathlib操作目录和文件
2021/11/20 Python
《模拟人生4》推出新补丁 “婚礼奇缘”DLC终于得到修复
2022/04/03 其他游戏
部分武汉产收音机展览
2022/04/07 无线电