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


Posted in PHP onJanuary 02, 2007

很多时候,我们在网上注册个人信息,在提交完页面后,总得等待页面刷新来告诉我们注册是否成功,遇到网络差的时候,如果注册了一大串的东西,在经过漫长的等待页面刷新后,得到的确是“您的用户名已被使用”或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" onChange="usercheck('check')" onBlur="usercheck('check')">
        <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" onChange="pwdcheck('pwd')" onBlur="pwdcheck('pwd')"
          <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" onChange="pwdrecheck('repwd')" onBlur="pwdrecheck('repwd')"> 
           <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 相关文章推荐
建立文件交换功能的脚本(一)
Oct 09 PHP
php下统计用户在线时间的一种尝试
Aug 26 PHP
PHP中strlen()和mb_strlen()的区别浅析
Jun 19 PHP
Yii核心组件AssetManager原理分析
Dec 02 PHP
PHP检测用户语言的方法
Jun 15 PHP
yii2.0实现验证用户名与邮箱功能
Dec 22 PHP
PHP AjaxForm提交图片上传并显示图片源码
Nov 29 PHP
浅谈ThinkPHP中initialize和construct的区别
Apr 01 PHP
php empty 函数判断结果为空但实际值却为非空的原因解析
May 28 PHP
PHP的图像处理实例小结【文字水印、图片水印、压缩图像等】
Dec 20 PHP
浅谈PHP之ThinkPHP框架使用详解
Jul 21 PHP
PHP $O00OO0=urldecode &amp; eval 解密,记一次商业源码的去后门
Sep 13 PHP
新手学PHP之数据库操作详解及乱码解决!
Jan 02 #PHP
默默小谈PHP&amp;MYSQL分页原理及实现
Jan 02 #PHP
默默简单的写了一个模板引擎
Jan 02 #PHP
超强分页类2.0发布,支持自定义风格,默认4种显示模式
Jan 02 #PHP
PHP小技巧搜集,每个PHPer都来露一手
Jan 02 #PHP
实例(Smarty+FCKeditor新闻系统)
Jan 02 #PHP
PHP+JS无限级可伸缩菜单详解(简单易懂)
Jan 02 #PHP
You might like
用PHP查询域名状态whois的类
2006/11/25 PHP
兼容PHP5的PHP目录管理函数库
2008/07/10 PHP
ThinkPHP采用模块和操作分析
2011/04/18 PHP
PHP备份数据库生成SQL文件并下载的函数代码
2012/02/05 PHP
PHP函数实现分页含文本分页和数字分页
2014/10/23 PHP
php给图片加文字水印
2015/07/31 PHP
js中同步与异步处理的方法和区别总结
2013/12/25 Javascript
8个超实用的jQuery功能代码分享
2015/01/08 Javascript
Spring mvc 接收json对象
2015/12/10 Javascript
jQuery弹簧插件编写基础之“又见弹窗”
2015/12/11 Javascript
js如何判断输入字符串长度
2015/12/16 Javascript
JS获取时间的相关函数及时间戳与时间日期之间的转换
2016/02/04 Javascript
jQuery实现div横向拖拽排序的简单实例
2016/07/13 Javascript
angularjs项目的页面跳转如何实现(5种方法)
2017/05/25 Javascript
hammer.js实现图片手势放大效果
2017/08/29 Javascript
JavaScript实现点击出现图片并统计点击次数功能示例
2018/07/23 Javascript
axios向后台传递数组作为参数的方法
2018/08/11 Javascript
解决vuecli3.0热更新失效的问题
2018/09/19 Javascript
python中assert用法实例分析
2015/04/30 Python
Python判断文件和文件夹是否存在的方法
2015/05/21 Python
Perl中著名的Schwartzian转换问题解决实现
2015/06/02 Python
ubuntu17.4下为python和python3装上pip的方法
2018/06/12 Python
Python一键查找iOS项目中未使用的图片、音频、视频资源
2019/08/12 Python
在Python中预先初始化列表内容和长度的实现
2019/11/28 Python
Python基础之高级变量类型实例详解
2020/01/03 Python
python如何支持并发方法详解
2020/07/25 Python
pyqt5实现井字棋的示例代码
2020/12/07 Python
英国天然宝石首饰购买网站:Gemondo Jewellery
2018/10/23 全球购物
北京SQL新华信咨询
2016/09/30 面试题
党干部专题民主生活会对照检查材料思想汇报
2014/10/06 职场文书
2015年试用期自我评价范文
2015/03/10 职场文书
超搞笑婚前保证书
2015/05/08 职场文书
业务员管理制度范本
2015/08/06 职场文书
开学第一周日记(三篇范文)
2019/08/23 职场文书
几款流行的HTML5 UI框架比较(小结)
2021/04/08 HTML / CSS
Mongodb 迁移数据块的流程介绍分析
2022/04/18 MongoDB