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 相关文章推荐
第四节--构造函数和析构函数
Nov 16 PHP
PHP通用检测函数集合
Nov 25 PHP
ThinkPHP实现多数据库连接的解决方法
Jul 01 PHP
PHP批量生成图片缩略图的方法
Jun 18 PHP
php实现转换html格式为文本格式的方法
May 16 PHP
Thinkphp3.2实用篇之计算型验证码示例
Feb 09 PHP
PHP中for循环与foreach的区别
Mar 06 PHP
PHP微信PC二维码登陆的实现思路
Jul 13 PHP
PHP实现将优酷土豆腾讯视频html地址转换成flash swf地址的方法
Aug 04 PHP
php微信公众号开发之微信企业付款给个人
Oct 04 PHP
详解PHP的抽象类和抽象方法以及接口总结
Mar 15 PHP
Laravel 微信小程序后端实现用户登录的示例代码
Nov 26 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
memcached 和 mysql 主从环境下php开发代码详解
2010/05/16 PHP
php遍历文件夹所有文件子文件夹函数代码
2013/11/27 PHP
php中spl_autoload详解
2014/10/17 PHP
PHP准确取得服务器IP地址的方法
2015/06/02 PHP
thinkPHP模板中for循环与switch语句用法示例
2016/11/30 PHP
利用PHP扩展Xhprof分析项目性能实践教程
2018/09/05 PHP
jQuery在vs2008及js文件中的无智能提示的解决方法
2010/12/30 Javascript
JS Replace()的高级使用方法介绍
2013/06/29 Javascript
jquery插件推荐浏览器嗅探userAgent
2014/11/09 Javascript
node.js中的fs.lstatSync方法使用说明
2014/12/16 Javascript
Javascript基础教程之函数对象和属性
2015/01/18 Javascript
Grunt入门教程(自动任务运行器)
2015/08/06 Javascript
jQuery链式操作实例分析
2015/11/16 Javascript
HTML页面定时跳转方法解析(2种任选)
2016/12/22 Javascript
json2.js 入门教程之使用方法与实例分析
2017/09/14 Javascript
vue-router 起步步骤详解
2019/03/26 Javascript
vue插槽slot的理解和使用方法
2019/04/03 Javascript
JS代码屏蔽F12,右键,粘贴,复制,剪切,选中,操作实例
2019/09/17 Javascript
关于在LayUI中使用AJAX提交巨坑记录
2019/10/25 Javascript
vue微信分享插件使用方法详解
2020/02/18 Javascript
Vue实现boradcast和dispatch的示例
2020/11/13 Javascript
pycharm 主题theme设置调整仿sublime的方法
2018/05/23 Python
python针对不定分隔符切割提取字符串的方法
2018/10/26 Python
在python image 中安装中文字体的实现方法
2019/08/22 Python
18个Python脚本可加速你的编码速度(提示和技巧)
2019/10/17 Python
详解Flask前后端分离项目案例
2020/07/24 Python
Python的scikit-image模块实例讲解
2020/12/30 Python
html5图片上传预览示例分享
2014/04/14 HTML / CSS
巴西一家专门从事家居和装饰的连锁店:Camicado
2019/08/14 全球购物
巴西香水和化妆品购物网站:The Beauty Box
2019/09/03 全球购物
用缩写的指针比较"if(p)" 检查空指针是否可靠?如果空指针的内部表达不是0会怎么样?
2014/01/05 面试题
付款委托书范本
2014/04/04 职场文书
环保倡议书50字
2014/05/15 职场文书
2014院党委领导班子及其成员群众路线对照检查材料思想汇报
2014/10/04 职场文书
导游词之吉林吉塔
2019/11/11 职场文书
世界十大评分最高的动漫,CLANNAD上榜,第八赚足人们眼泪
2022/03/18 日漫