首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 PHP

PHP＋AJAX实现无刷新注册（带用户名实时检测）

Posted in PHP onJanuary 02, 2007

很多时候，我们在网上注册个人信息，在提交完页面后，总得等待页面刷新来告诉我们注册是否成功，遇到网络差的时候，如果注册了一大串的东西，在经过漫长的等待页面刷新后，得到的确是“您的用户名已被使用”或XXXXXXX不合法，我想大家的心情一定特别不爽，今天就介绍个AJAX实现页面不刷新注册＋实时检测用户信息的简单注册程序，希望对大家有所帮助。好的，先看注册界面代码：

  <table width="831" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr style="display:none">
    <td height="35" align="center" id="result"> </td>
  </tr>
</table>
<table width="100%" height="256" border="0" align="center" cellpadding="1" cellspacing="1">
      <tr>
        <td width="150" align="left" bgcolor="#FFFFFF">  · 用户名称:          </td>
        <td width="310" align="center" bgcolor="#FFFFFF"> 
          <input name="username" type="text" class="inputtext" id="username" onChange="usercheck('check')" onBlur="usercheck('check')">
        <font color="#FF6633">*</font></td>
        <td align="left" bgcolor="#FFFFFF" id="check"> 4-16个字符，英文小写、汉字、数字、最好不要全部是数字。</td>
      </tr>
      <tr>
        <td width="150" align="left" bgcolor="#FFFFFF">   · 用户密码:</td>
        <td width="310" align="center" bgcolor="#FFFFFF"> 
          <input name="userpwd" type="password" class="inputtext" id="userpwd" onChange="pwdcheck('pwd')" onBlur="pwdcheck('pwd')"> 
          <font color="#FF6633">*</font>        </td>
        <td align="left" bgcolor="#FFFFFF" id="pwd"> 密码字母有大小写之分。6-16位（包括6、16），限用英文、数字。</td>
      </tr>
   <tr>
        <td width="150" align="left" bgcolor="#FFFFFF">  · 重复密码：</td>
        <td width="310" align="center" bgcolor="#FFFFFF">  
          <input name="reuserpwd" type="password" class="inputtext" id="reuserpwd" onChange="pwdrecheck('repwd')" onBlur="pwdrecheck('repwd')"> 
           <font color="#FF6633">*</font>        </td>
        <td align="left" bgcolor="#FFFFFF" id="repwd"> 请再次输入登录密码。</td>
   </tr>
    </table>

如图：

PHP＋AJAX实现无刷新注册（带用户名实时检测）

 

红色部分就是一会要调用的js函数了，当我们选定一个文本框后就会开始调用，现在我们看上面那个页面包含的ajaxreg.js文件的代码，里面就是包含了ajax框架和一些判断函数。

var http_request=false;
  function send_request(url){//初始化，指定处理函数，发送请求的函数
    http_request=false;
 //开始初始化XMLHttpRequest对象
 if(window.XMLHttpRequest){//Mozilla浏览器
  http_request=new XMLHttpRequest();
  if(http_request.overrideMimeType){//设置MIME类别
    http_request.overrideMimeType("text/xml");
  }
 }
 else if(window.ActiveXObject){//IE浏览器
  try{
   http_request=new ActiveXObject("Msxml2.XMLHttp");
  }catch(e){
   try{
   http_request=new ActiveXobject("Microsoft.XMLHttp");
   }catch(e){}
  }
    }
 if(!http_request){//异常，创建对象实例失败
  window.alert("创建XMLHttp对象失败！");
  return false;
 }
 http_request.onreadystatechange=processrequest;
 //确定发送请求方式，URL，及是否同步执行下段代码
    http_request.open("GET",url,true);
 http_request.send(null);
  }
  //处理返回信息的函数
  function processrequest(){
   if(http_request.readyState==4){//判断对象状态
     if(http_request.status==200){//信息已成功返回，开始处理信息
   document.getElementById(reobj).innerHTML=http_request.responseText;
  }
  else{//页面不正常
   alert("您所请求的页面不正常！");
  }
   }
  }
  function usercheck(obj){
   var f=document.reg;
   var username=f.username.value;
   if(username==""){
   document.getElementById(obj).innerHTML=" <font color=red>用户名不能为空！</font>";
 f.username.focus();
 return false;
   }
   else{
   document.getElementById(obj).innerHTML="正在读取数据...";
   send_request('checkuserreg.php?username='+username);
   reobj=obj;
   }
  }
  function pwdcheck(obj){
    var f=document.reg;
 var pwd=f.userpwd.value;
 if(pwd==""){
   document.getElementById(obj).innerHTML=" <font color=red>用户密码不能为空！</font>";
   f.userpwd.focus();
   return false;
 }
 else if(f.userpwd.value.length<6){
   document.getElementById(obj).innerHTML=" <font color=red>密码长度不能小于6位！</font>";
   f.userpwd.focus();
   return false;
 }
 else{
   document.getElementById(obj).innerHTML=" <font color=red>密码符合要求！</font>";
 }
  }
  function pwdrecheck(obj){
    var f=document.reg;
 var repwd=f.reuserpwd.value;
 if (repwd==""){
   document.getElementById(obj).innerHTML=" <font color=red>请再输入一次密码！</font>";
   f.reuserpwd.focus();
   return false;
 }
 else if(f.userpwd.value!=f.reuserpwd.value){
   document.getElementById(obj).innerHTML=" <font color=red>两次输入的密码不一致！</font>";
   f.reuserpwd.focus();
   return false;
 }
 else{
   document.getElementById(obj).innerHTML=" <font color=red>密码输入正确！</font>";
 }
}

   不难看出，数据是通过异步传输到checkuserreg.php接着回送回信息显示出来来达到实时检测用户名的目的，至于密码，只作了长度的实时判断，有兴趣的朋友可以扩充功能。来看下checkuserreg.php到底都做了什么：

<?php
  header('Content-Type:text/html;charset=GB2312');//避免输出乱码
  include('inc/config.inc.php');//包含数据库基本配置信息
  include('inc/dbclass.php');//包含数据库操作类
  $username=trim($_GET['username']);//获取注册名
  //-----------------------------------------------------------------------------------
  $db=new db;//从数据库操作类生成实例
  $db->mysql($dbhost,$dbuser,$dbpassword,$dbname);//调用连接参数函数
  $db->createcon();//调用创建连接函数
  //-----------------------------------------------------------------------------------
  $querysql="select username from cr_userinfo where username='$username'";//查询会员名
  $result=$db->query($querysql);
  $rows=$db->loop_query($result);
  //若会员名已注册
  //-----------------------------------------------------------------------------------
  if($rows){
   echo" <font color=red>此会员名已被注册，请更换会员名！</font>";
  }
  //会员名未注册则显示 

  //----------------------------------------------------------------------------
  else{
   echo" <font color=red>此会员名可以注册！</font>";
  }
  if($action==reg){
  $addsql="insert into cr_userinfo
          values(0,'$username','$userpwd','$time',50,1,'$userquestion','$useranswer')";

  $db->query($addsql);
  echo"<img src=images/pass.gif> <font color=red>恭喜您，注册成功！请点击<a href=login.php>这里</a>登陆！</font>";
  }
  $db->close();//关闭数据库连接
?>

   注释写的还算详细，大家应该都能看懂，再看信息合法后我们提交注册信息实现无刷新注册的PHP代码,senduserinfo.php：

<?php
  header('Content-Type:text/html;charset=GB2312');//避免输出乱码
  include('inc/config.inc.php');//包含数据库基本配置信息
  include('inc/dbclass.php');//包含数据库操作类
  $username=trim($_GET['username']);//获取注册名
  $userpwd=md5(trim($_GET['userpwd']));//获取注册密码
  $time=date("Y-m-d");

  //-----------------------------------------------------------------------------------
  $db=new db;//从数据库操作类生成实例
  $db->mysql($dbhost,$dbuser,$dbpassword,$dbname);//调用连接参数函数
  $db->createcon();//调用创建连接函数
  //-----------------------------------------------------------------------------------
  //开始插入数据
  //-----------------------------------------------------------------------------------
  $addsql="insert into cr_userinfo values(0,'$username','$userpwd','$time',50,1,'$userquestion','$useranswer')";
  $db->query($addsql);
  echo"<img src=images/pass.gif> <font color=red>恭喜您，注册成功！请点击<a href=login.php>这里</a>登录！</font>";

  $db->close();//关闭数据库连接
?>

OK！！大功告成，来看看效果图：

1.

PHP＋AJAX实现无刷新注册（带用户名实时检测）

 

2.

PHP＋AJAX实现无刷新注册（带用户名实时检测）

 

3.

PHP＋AJAX实现无刷新注册（带用户名实时检测）

 

4.

PHP＋AJAX实现无刷新注册（带用户名实时检测）

 

5.

PHP＋AJAX实现无刷新注册（带用户名实时检测）

 

怎么样？还不错吧，贴了这么多累死了，希望大家喜欢～～～～

PHP＋AJAX实现无刷新注册（带用户名实时检测）

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

PHP 相关文章推荐
PHP 解决utf-8和gb2312编码转换问题
Mar 18 PHP
PHP目录函数实现创建、读取目录教程实例
Jan 13 PHP
用穿越火线快速入门php面向对象
Feb 22 PHP
JS中encodeURIComponent函数用php解码的代码
Mar 01 PHP
Php中用PDO查询Mysql来避免SQL注入风险的方法
Apr 25 PHP
PHP文件缓存内容保存格式实例分析
Aug 20 PHP
PHP中的常见魔术方法功能作用及用法实例
Jul 01 PHP
YII Framework框架教程之缓存用法详解
Mar 14 PHP
PHP邮箱验证示例教程
Jun 01 PHP
PHP实现的曲线统计图表示例
Nov 10 PHP
PHP编写daemon process 实例详解
Nov 13 PHP
thinkPHP框架实现图像裁剪、缩放、加水印的方法
Mar 14 PHP
新手学PHP之数据库操作详解及乱码解决！
Jan 02 #PHP
默默小谈PHP&amp;MYSQL分页原理及实现
Jan 02 #PHP
默默简单的写了一个模板引擎
Jan 02 #PHP
超强分页类2.0发布，支持自定义风格，默认4种显示模式
Jan 02 #PHP
PHP小技巧搜集,每个PHPer都来露一手
Jan 02 #PHP
实例(Smarty+FCKeditor新闻系统)
Jan 02 #PHP
PHP+JS无限级可伸缩菜单详解（简单易懂）
Jan 02 #PHP
R601SW(1) E1-XM(1) ETON(1) S900(1) 电子管(5) 矿石收音机(1) 接收机(2) DSP(2) 放大器(1) 沃尔沃(1)
You might like
php Rename 更改文件、文件夹名称
2011/05/24 PHP
PHP中操作ini配置文件的方法
2013/04/25 PHP
PHP设计模式之解释器模式的深入解析
2013/06/13 PHP
基础的WordPress插件制作教程
2015/11/24 PHP
JS创建优美的页面滑动块效果 - Glider.js
2007/09/27 Javascript
prototype Element学习笔记(篇二)
2008/10/26 Javascript
Jquery 最近浏览过的商品的功能实现代码
2010/05/14 Javascript
jQuery.get、jQuery.getJSON、jQuery.post无法返回JSON问题的解决方法
2011/07/28 Javascript
js修改table中Td的值(定义td的双击事件)
2013/01/10 Javascript
探讨JavaScript中声明全局变量三种方式的异同
2013/12/03 Javascript
浅谈JavaScript 的执行顺序
2015/08/07 Javascript
详解JavaScript模块化开发
2016/12/04 Javascript
jQuery实现文字自动横移
2017/01/08 Javascript
脚本div实现拖放功能(两种)
2017/02/13 Javascript
jQuery插件HighCharts实现的2D条状图效果示例【附demo源码下载】
2017/03/15 Javascript
JS实现页面跳转与刷新的方法汇总
2019/08/30 Javascript
你知道JavaScript Symbol类型怎么用吗
2020/01/08 Javascript
让IDE识别webpack的别名alias的实现方法
2020/05/06 Javascript
解决VantUI popup 弹窗不弹出或无蒙层的问题
2020/11/03 Javascript
[03:03]DOTA2校园争霸赛 济南城市决赛欢乐发奖活动
2013/10/21 DOTA
windows系统下Python环境搭建教程
2017/03/28 Python
python实现决策树C4.5算法详解(在ID3基础上改进)
2017/05/31 Python
python2.7和NLTK安装详细教程
2018/09/19 Python
Python多图片合并PDF的方法
2019/01/03 Python
Python3 执行系统命令并获取实时回显功能
2019/07/09 Python
OpenCV 边缘检测
2019/07/10 Python
使用apiDoc实现python接口文档编写
2019/11/19 Python
25个CSS3动画按钮和菜单教程分享
2012/10/03 HTML / CSS
HTML5 File接口在web页面上使用文件下载
2017/02/27 HTML / CSS
购买200个世界上最好的内衣品牌：Bare Necessities
2017/02/11 全球购物
计算s=f(f(-1.4))的值
2014/05/06 面试题
linux面试题参考答案（8）
2016/04/19 面试题
暑期政治学习心得体会
2014/09/02 职场文书
学生会主席任命书
2015/09/21 职场文书
教你用python控制安卓手机
2021/05/13 Python
解决vue $http的get和post请求跨域问题
2021/06/07 Vue.js