PHP+AJAX实现无刷新注册(带用户名实时检测)


Posted in PHP onDecember 02, 2006

很多时候,我们在网上注册个人信息,在提交完页面后,总得等待页面刷新来告诉我们注册是否成功,遇到网络差的时候,如果注册了一大串的东西,在经过漫长的等待页面刷新后,得到的确是“您的用户名已被使用”或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" >
        
        <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" >

          <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"
>

           <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 相关文章推荐
E路文章系统PHP
Dec 11 PHP
PHP读取目录下所有文件的代码
Jan 07 PHP
用PHP获取Google AJAX Search API 数据的代码
Mar 12 PHP
解析PHP中VC6 X86和VC9 X86的区别及 Non Thread Safe的意思
Jun 28 PHP
解析php类的注册与自动加载
Jul 05 PHP
PHP imagegrabscreen和imagegrabwindow(截取网站缩略图)的实例代码
Nov 07 PHP
学习php中的正则表达式
Aug 17 PHP
php的GD库imagettftext函数解决中文乱码问题
Jan 24 PHP
浅谈本地WAMP环境的搭建
May 13 PHP
简单了解WordPress开发中update_option()函数的用法
Jan 11 PHP
ThinkPHP连接Oracle数据库
Apr 22 PHP
php+croppic.js实现剪切上传图片功能
Aug 14 PHP
php字符串截取问题
Nov 28 #PHP
mysq GBKl乱码
Nov 28 #PHP
php类
Nov 27 #PHP
PHP完整的日历类(CLASS)
Nov 27 #PHP
PHP如何得到当前页和上一页的地址?
Nov 27 #PHP
PHP读写文件的方法(生成HTML)
Nov 27 #PHP
PHP date函数参数详解
Nov 27 #PHP
You might like
php巧获服务器端信息
2006/12/06 PHP
微信公众号开发客服接口实例代码
2016/10/21 PHP
关于 Laravel Redis 多个进程同时取队列问题详解
2017/12/25 PHP
PHP封装类似thinkphp连贯操作数据库Db类与简单应用示例
2019/05/08 PHP
PHP cookie,session的使用与用户自动登录功能实现方法分析
2019/06/05 PHP
根据判断浏览器类型屏幕分辨率自动调用不同CSS的代码
2007/02/22 Javascript
Javascript 实用小技巧
2010/04/07 Javascript
根据一段代码浅谈Javascript闭包
2010/12/14 Javascript
js模仿jquery的写法示例代码
2013/06/16 Javascript
JS生成随机字符串的多种方法
2014/06/10 Javascript
jquery实现动态操作select选中
2015/02/11 Javascript
jquery实现的Accordion折叠面板效果代码
2015/09/02 Javascript
jQuery实现的给图片点赞+1动画效果(附在线演示及demo源码下载)
2015/12/31 Javascript
js实现带三角符的手风琴效果
2017/03/01 Javascript
bootstrap+jQuery 实现下拉菜单中复选框全选和全不选效果
2017/06/12 jQuery
创建echart多个联动的示例代码
2018/11/23 Javascript
微信公众平台 发送模板消息(Java接口开发)
2019/04/17 Javascript
《javascript设计模式》学习笔记五:Javascript面向对象程序设计工厂模式实例分析
2020/04/08 Javascript
详解JavaScript 作用域
2020/07/14 Javascript
vue 动态添加的路由页面刷新时失效的原因及解决方案
2021/02/26 Vue.js
Python def函数的定义、使用及参数传递实现代码
2014/08/10 Python
Flask实现图片的上传、下载及展示示例代码
2018/08/03 Python
python将一个英文语句以单词为单位逆序排放的方法
2018/12/20 Python
Spring @Enable模块驱动原理及使用实例
2020/06/23 Python
使用keras实现BiLSTM+CNN+CRF文字标记NER
2020/06/29 Python
python 进程池pool使用详解
2020/10/15 Python
python 将html转换为pdf的几种方法
2020/12/29 Python
纯CSS3实现绘制各种图形实现代码详细整理
2012/12/26 HTML / CSS
html5使用Canvas绘图的使用方法
2017/11/21 HTML / CSS
德国在线香料制造商:Gewürzland
2020/03/10 全球购物
什么是动态端口(Dynamic Ports)?动态端口的范围是多少?
2014/12/12 面试题
即兴演讲稿
2014/01/04 职场文书
小学生期末评语
2014/04/21 职场文书
党的群众路线教育实践活动宣传标语口号
2014/06/06 职场文书
安全承诺书
2015/01/19 职场文书
自荐信大全
2019/03/21 职场文书