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 相关文章推荐
phpmyadmin显示utf8_general_ci中文乱码的问题终级篇
Apr 08 PHP
解析zend Framework如何自动加载类
Jun 28 PHP
YII实现分页的方法
Jul 09 PHP
ThinkPHP后台首页index使用frameset时的注意事项分析
Aug 22 PHP
PHP中feof()函数实例测试
Aug 23 PHP
使用php方法curl抓取AJAX异步内容思路分析及代码分享
Aug 25 PHP
php图片上传类 附调用方法
May 15 PHP
PHP模糊查询的实现方法(推荐)
Sep 06 PHP
PHP实现图片批量打包下载功能
Mar 01 PHP
浅谈Yii乐观锁的使用及原理
Jul 25 PHP
php微信公众号开发之关键词回复
Oct 20 PHP
解决laravel(5.5)访问public报错的问题
Oct 12 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 has encountered a Stack overflow问题解决方法
2014/11/03 PHP
PHP 应用容器化以及部署方法
2018/02/12 PHP
基于php解决json_encode中文UNICODE转码问题
2020/11/10 PHP
JavaScript避免代码的重复执行经验技巧分享
2014/04/17 Javascript
Extjs grid panel自带滚动条失效的解决方法
2014/09/11 Javascript
javascript模拟map输出与去除重复项的方法
2015/02/09 Javascript
自定义百度分享的分享按钮
2015/03/18 Javascript
个人总结的一些JavaScript技巧、实用函数、简洁方法、编程细节
2015/06/10 Javascript
基于jQuery实现发送短信验证码后的倒计时功能(无视页面关闭)
2016/09/02 Javascript
浅谈JS中的!=、== 、!==、===的用法和区别
2016/09/24 Javascript
AngularJs中Bootstrap3 datetimepicker使用实例
2016/12/13 Javascript
JS求解三元一次方程组值的方法
2017/01/03 Javascript
vue.js系列中的vue-fontawesome使用
2018/02/10 Javascript
详解ES6 Fetch API HTTP请求实用指南
2018/11/14 Javascript
layui之table checkbox初始化时选中对应选项的方法
2019/09/02 Javascript
layui对工具条进行选择性的显示方法
2019/09/19 Javascript
layui添加动态菜单与选项卡 AJAX请求的例子
2019/09/25 Javascript
JavaScript定时器常见用法实例分析
2019/11/15 Javascript
[38:40]2018DOTA2亚洲邀请赛 4.6淘汰赛 mineski vs LGD 第一场
2018/04/10 DOTA
Python计算斗牛游戏概率算法实例分析
2017/09/26 Python
python pycurl验证basic和digest认证的方法
2018/05/02 Python
python 通过类中一个方法获取另一个方法变量的实例
2019/01/22 Python
jupyter 使用Pillow包显示图像时inline显示方式
2020/04/24 Python
Python虚拟环境的创建和包下载过程分析
2020/06/19 Python
利用HTML5中的Canvas绘制一张笑脸的教程
2015/05/07 HTML / CSS
美国高品质个性化珠宝销售网站:Jewlr
2018/05/03 全球购物
意大利辅助药品、药物和补品在线销售:FarmaEurope
2020/04/29 全球购物
澳洲的UGG雪地靴超级市场:Uggs.com.au
2020/04/06 全球购物
四年大学生活的个人自我评价
2013/12/11 职场文书
租房协议书范文
2014/08/20 职场文书
国庆庆典邀请函
2015/02/02 职场文书
四风之害观后感
2015/06/09 职场文书
假如给我三天光明读书笔记
2015/06/26 职场文书
销区经理年终述职报告模板
2019/11/28 职场文书
K8s部署发布Golang应用程序的实现方法
2021/07/16 Golang
微前端qiankun改造日渐庞大的项目教程
2022/06/21 Javascript