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 相关文章推荐
?生?D片??C字串
Dec 06 PHP
ajax+php打造进度条 readyState各状态
Mar 20 PHP
hessian 在PHP中的使用介绍
Dec 13 PHP
PHP函数篇详解十进制、二进制、八进制和十六进制转换函数说明
Dec 05 PHP
CURL的学习和应用(附多线程实现)
Jun 03 PHP
php单态设计模式(单例模式)实例
Nov 18 PHP
php实现计算百度地图坐标之间距离的方法
May 05 PHP
PHP使用 Imagick 扩展实现图片合成,圆角处理功能示例
Sep 09 PHP
php定期拉取数据对比方法实例
Sep 22 PHP
laravel实现查询最后执行的一条sql语句的方法
Oct 09 PHP
Laravel框架Eloquent ORM删除数据操作示例
Dec 03 PHP
php实现通过stomp协议连接ActiveMQ操作示例
Feb 23 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中for循环语句的几种变型
2006/11/26 PHP
PHP Zip解压 文件在线解压缩的函数代码
2010/05/26 PHP
个人写的PHP验证码生成类分享
2014/08/21 PHP
利用PHP判断是手机移动端还是PC端访问的函数示例
2017/12/14 PHP
PHP实现的简单路由和类自动加载功能
2018/03/13 PHP
为Plesk PHP7启用Oracle OCI8扩展方法总结
2019/03/29 PHP
Linux下安装Memcached服务器和客户端与PHP使用示例
2019/04/15 PHP
关于JavaScript中的关联数组分析
2013/04/09 Javascript
检查输入的是否是数字使用keyCode配合onkeypress事件
2014/01/23 Javascript
js过滤特殊字符输入适合输入、粘贴、拖拽多种情况
2014/03/22 Javascript
jQuery实现的简单分页示例
2016/06/01 Javascript
微信小程序 教程之WXML
2016/10/18 Javascript
微信小程序 参数传递实例代码
2017/03/20 Javascript
webpack3之loader全解析
2017/10/26 Javascript
Vue实现简单分页器
2018/12/29 Javascript
Vue 实现前端权限控制的示例代码
2019/07/09 Javascript
详解vue beforeRouteEnter 异步获取数据给实例问题
2019/08/09 Javascript
vue实现axios图片上传功能
2019/08/20 Javascript
[05:13]TI4 中国战队 机场出征!!
2014/07/07 DOTA
[04:44]DOTA2 2017全国高校联赛视频回顾
2017/08/21 DOTA
python实现爬虫统计学校BBS男女比例之多线程爬虫(二)
2015/12/31 Python
python条件变量之生产者与消费者操作实例分析
2017/03/22 Python
python实现二分类的卡方分箱示例
2019/11/22 Python
Numpy之将矩阵拉成向量的实例
2019/11/30 Python
Python中关于logging模块的学习笔记
2020/06/03 Python
Python实现自动签到脚本的示例代码
2020/08/19 Python
python里glob模块知识点总结
2021/01/05 Python
Django项目在pycharm新建的步骤方法
2021/03/02 Python
CSS3实现多背景模拟动态边框的效果
2016/11/08 HTML / CSS
html5版canvas自由拼图实例
2014/10/15 HTML / CSS
高清屏中使用Canvas绘图出现模糊的问题及解决方法
2019/06/03 HTML / CSS
加拿大鞋子连锁店:Town Shoes
2016/09/26 全球购物
纽约复古灵感的现代珠宝品牌:Lulu Frost
2018/03/03 全球购物
2014庆六一活动方案
2014/03/02 职场文书
“5.12”护士节主持词
2015/07/04 职场文书
创业计划书之美容店
2019/09/16 职场文书