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 相关文章推荐
两种php调用Java对象的方法
Oct 09 PHP
dedecms模版制作使用方法
Apr 03 PHP
php知道与问问的采集插件代码
Oct 12 PHP
php调用方法mssql_fetch_row、mssql_fetch_array、mssql_fetch_assoc和mssql_fetch_objcect读取数据的区别
Aug 08 PHP
php 深入理解strtotime函数的使用详解
May 23 PHP
php获取字符串中各个字符出现次数的方法
Feb 23 PHP
PHP中把数据库查询结果输出为json格式简单实例
Apr 09 PHP
四个PHP非常实用的功能
Sep 29 PHP
PHP进制转换实例分析(2,8,16,36,64进制至10进制相互转换)
Feb 04 PHP
php curl上传、下载、https登陆实现代码
Jul 23 PHP
Windows平台PHP+IECapt实现网页批量截图并创建缩略图功能详解
Aug 02 PHP
laravel实现图片上传预览,及编辑时可更换图片,并实时变化的例子
Nov 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二维数组排序的函数分享
2014/01/17 PHP
ThinkPHP的URL重写问题
2014/06/22 PHP
php转换颜色为其反色的方法
2015/04/27 PHP
php使用CURL不依赖COOKIEJAR获取COOKIE的方法
2015/06/17 PHP
PHP面向对象程序设计模拟一般面向对象语言中的方法重载(overload)示例
2019/06/13 PHP
PHP与SQL语句写一句话木马总结
2019/10/11 PHP
Laravel框架数据库迁移操作实例详解
2020/04/06 PHP
JavaScipt基本教程之前言
2008/01/16 Javascript
JS记录用户登录次数实现代码
2014/01/15 Javascript
Jquery easyUI 更新行示例
2014/03/06 Javascript
Bootstrap 网格系统布局详解
2017/03/19 Javascript
JavaScript实现的搜索及高亮显示功能示例
2017/08/14 Javascript
javascript 判断用户有没有操作页面
2017/10/17 Javascript
详解如何在Angular优雅编写HTTP请求
2018/12/05 Javascript
解决layui的radio属性或别的属性没显示出来的问题
2019/09/26 Javascript
package.json中homepage属性的作用详解
2020/03/11 Javascript
JS forEach跳出循环2种实现方法
2020/06/24 Javascript
Python使用minidom读写xml的方法
2015/06/03 Python
使用httplib模块来制作Python下HTTP客户端的方法
2015/06/19 Python
总结用Pdb库调试Python的方式及常用的命令
2016/08/18 Python
Python中文分词工具之结巴分词用法实例总结【经典案例】
2017/04/15 Python
Django中间件实现拦截器的方法
2018/06/01 Python
使用Python计算玩彩票赢钱概率
2019/06/26 Python
Python自定义一个异常类的方法
2019/06/27 Python
解决python彩色螺旋线绘制引发的问题
2019/11/23 Python
基于python的列表list和集合set操作
2019/11/24 Python
python飞机大战pygame游戏之敌机出场实现方法详解
2019/12/17 Python
两道JAVA笔试题
2016/09/14 面试题
SOA的常见陷阱或者误解是什么
2014/10/05 面试题
物业管理大学生个人的自我评价
2013/10/10 职场文书
教师个人鉴定材料
2014/02/08 职场文书
公司司机岗位职责范本
2014/03/03 职场文书
三年级评语大全
2014/04/23 职场文书
预备党员2014年第四季度思想汇报范文
2014/10/25 职场文书
幼儿园毕业典礼园长致辞
2015/07/29 职场文书
js 数组 fill() 填充方法
2021/11/02 Javascript