백엔드 개발 PHP 튜토리얼 PHP+AJAX实现无刷新注册(带用户名实时检测)_PHP教程

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

Jul 21, 2016 pm 04:00 PM
php+ajax 개인의 정보 새로 고치다 존재하다 실시간 성취하다 우리를 제출하다 발각 등록하다

很多时候,我们在网上注册个人信息,在提交完页面后,总得等待页面刷新来告诉我们注册是否成功,遇到网络差的时候,如果注册了一大串的东西,在经过漫长的等待页面刷新后,得到的确是“您的用户名已被使用”或XXXXXXX不合法,我想大家的心情一定特别不爽,今天就介绍个AJAX实现页面不刷新注册+实时检测用户信息的简单注册程序,希望对大家有所帮助。好的,先看注册界面代码:
   


  

   

  



      
        
        
        
      
      
        
        
        
      
         
        
        
        
         
   
  · 用户名称:         
          >
        
        *
4-16个字符,英文小写、汉字、数字、最好不要全部是数字。
   · 用户密码:
          >

          *        
密码字母有大小写之分。6-16位(包括6、16),限用英文、数字。
  · 重复密码:   
          >

           *        
请再次输入登录密码。

   如图:

  

红色部分就是一会要调用的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=" 用户名不能为空!";
        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=" 用户密码不能为空!";
          f.userpwd.focus();
          return false;
        }
        else if(f.userpwd.value.length          document.getElementById(obj).innerHTML=" 密码长度不能小于6位!";
          f.userpwd.focus();
          return false;
        }
        else{
          document.getElementById(obj).innerHTML=" 密码符合要求!";
        }
  }
  function pwdrecheck(obj){
    var f=document.reg;
        var repwd=f.reuserpwd.value;
        if (repwd==""){
          document.getElementById(obj).innerHTML=" 请再输入一次密码!";
          f.reuserpwd.focus();
          return false;
        }
        else if(f.userpwd.value!=f.reuserpwd.value){
          document.getElementById(obj).innerHTML=" 两次输入的密码不一致!";
          f.reuserpwd.focus();
          return false;
        }
        else{
          document.getElementById(obj).innerHTML=" 密码输入正确!";
        }
  }

不难看出,数据是通过异步传输到checkuserreg.php接着回送回信息显示出来来达到实时检测用户名的目的,至于密码,只作了长度的实时判断,有兴趣的朋友可以扩充功能。来看下checkuserreg.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" 此会员名已被注册,请更换会员名!";
  }
  //会员名未注册则显示
  //-----------------------------------------------------------------------------------
  else{
          echo" 此会员名可以注册!";
  }
  if($action==reg){
  $addsql="insert into cr_userinfo
          values(0,'$username','$userpwd','$time',50,1,'$userquestion','$useranswer')";

  $db->query($addsql);
  echo"PHP+AJAX实现无刷新注册(带用户名实时检测)_PHP教程 恭喜您,注册成功!请点击这里登陆!";
  }
  $db->close();//关闭数据库连接
?>

注释写的还算详细,大家应该都能看懂,再看信息合法后我们提交注册信息实现无刷新注册的PHP代码,senduserinfo.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"PHP+AJAX实现无刷新注册(带用户名实时检测)_PHP教程 恭喜您,注册成功!请点击这里登录!";

  $db->close();//关闭数据库连接
?>

OK!!大功告成,来看看效果图:
1.


2.


3.


4.


5.


怎么样?还不错吧,贴了这么多累死了,希望大家喜欢~~~~

www.bkjia.comtruehttp://www.bkjia.com/PHPjc/317173.htmlTechArticle很多时候,我们在网上注册个人信息,在提交完页面后,总得等待页面刷新来告诉我们注册是否成功,遇到网络差的时候,如果注册了一大...
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

Video Face Swap

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

Xiaohongshu에 여러 계정을 등록하는 방법은 무엇입니까? 여러 계정을 등록하면 발각되나요? Xiaohongshu에 여러 계정을 등록하는 방법은 무엇입니까? 여러 계정을 등록하면 발각되나요? Mar 25, 2024 am 09:41 AM

소셜 네트워킹과 전자상거래를 통합한 플랫폼인 Xiaohongshu는 점점 더 많은 사용자를 끌어들이고 있습니다. 일부 사용자는 Xiaohongshu와 더 나은 상호 작용 경험을 위해 여러 계정을 등록하기를 원합니다. 그렇다면 Xiaohongshu에 여러 계정을 등록하는 방법은 무엇입니까? 1. Xiaohongshu에 여러 계정을 등록하는 방법은 무엇입니까? 1. 다른 휴대폰 번호를 사용하여 등록합니다. 현재 Xiaohongshu는 주로 휴대폰 번호를 사용하여 계정을 등록합니다. 사용자들은 때때로 여러 개의 휴대폰 번호 카드를 구입하여 여러 개의 Xiaohongshu 계정을 등록하는 데 사용하려고 합니다. 그러나 이 방법에는 여러 장의 휴대폰 번호 카드를 구입하는 것이 번거롭고 비용이 많이 들기 때문에 몇 가지 제한 사항이 있습니다. 2. 이메일을 사용하여 등록하세요. 휴대폰 번호 외에도 이메일을 사용하여 Xiaohongshu 계정을 등록할 수 있습니다. 사용자는 여러 개의 이메일 주소를 준비한 후 해당 이메일 주소를 사용하여 계정을 등록할 수 있습니다. 하지만

Manwa Comics 계정 등록 방법 Manwa Comics 계정 등록 방법 Feb 28, 2024 am 08:00 AM

Manwa Comics 플랫폼에는 모든 사람이 탐색할 수 있는 풍부한 만화 리소스가 있습니다. 만와코믹스 공식 플랫폼에 쉽게 들어오시면 온갖 종류의 멋진 만화 작품을 감상하실 수 있습니다. 각 친구는 자신이 좋아하는 만화를 쉽게 찾아 자신의 취향에 따라 읽을 수 있습니다. 그렇다면 Manwa Comics의 공식 계정을 등록하는 방법은 무엇입니까? 이 웹사이트의 편집자는 도움이 필요한 모든 사람에게 도움이 되기를 바라며 이 상세한 튜토리얼 가이드를 제공할 것입니다. 만와 코믹스 - 공식 입구: https://fuw11.cc/mw666 만와 코믹스 앱 다운로드 주소: https://www.siemens-home.cn/soft/74440.html 만와 코믹스 비본토 지역 입구: https: /

Windows 11에서 F5 새로 고침 키가 작동하지 않습니다. Windows 11에서 F5 새로 고침 키가 작동하지 않습니다. Mar 14, 2024 pm 01:01 PM

Windows 11/10 PC에서 F5 키가 제대로 작동하지 않나요? F5 키는 일반적으로 데스크탑이나 탐색기를 새로 고치거나 웹 페이지를 다시 로드하는 데 사용됩니다. 그러나 일부 독자들은 F5 키가 컴퓨터를 새로 고치고 제대로 작동하지 않는다고 보고했습니다. Windows 11에서 F5 새로 고침을 활성화하는 방법은 무엇입니까? Windows PC를 새로 고치려면 F5 키를 누르십시오. 일부 노트북이나 데스크탑에서는 새로 고침 작업을 완료하려면 Fn+F5 키 조합을 눌러야 할 수도 있습니다. F5 새로 고침이 작동하지 않는 이유는 무엇입니까? F5 키를 눌러도 컴퓨터가 새로 고쳐지지 않거나 Windows 11/10에서 문제가 발생하는 경우 기능 키가 잠겨 있기 때문일 수 있습니다. 다른 잠재적인 원인으로는 키보드 또는 F5 키가 있습니다.

Xiaohongshu 계정을 등록하는 방법은 무엇입니까? Xiaohongshu 계정을 등록하려면 무엇이 필요합니까? Xiaohongshu 계정을 등록하는 방법은 무엇입니까? Xiaohongshu 계정을 등록하려면 무엇이 필요합니까? Mar 22, 2024 am 10:16 AM

생활, 엔터테인먼트, 쇼핑, 공유를 통합한 소셜 플랫폼인 Xiaohongshu는 많은 젊은이들의 일상생활에서 없어서는 안 될 부분이 되었습니다. 그렇다면 Xiaohongshu 계정을 등록하는 방법은 무엇입니까? 1. Xiaohongshu 계정을 등록하는 방법은 무엇입니까? 1. Xiaohongshu 공식 웹사이트를 열거나 Xiaohongshu 앱을 다운로드하세요. 아래의 "등록" 버튼을 클릭하면 다양한 등록 방법을 선택할 수 있습니다. 현재 Xiaohongshu는 휴대폰 번호, 이메일 주소 및 제3자 계정(예: WeChat, QQ, Weibo 등) 등록을 지원합니다. 3. 관련 정보를 입력하세요. 선택한 등록 방법에 따라 해당 휴대폰 번호, 이메일 주소 또는 제3자 계정 정보를 입력하세요. 4. 비밀번호를 설정하세요. 계정을 안전하게 보호하려면 강력한 비밀번호를 설정하세요. 5. 인증을 완료합니다. 안내에 따라 휴대폰 인증 또는 이메일 인증을 완료하세요. 6. 개인을 온전케 하라

Xiaohongshu 계정을 등록하는 방법은 무엇입니까? 계정이 비정상인 경우 어떻게 복구하나요? Xiaohongshu 계정을 등록하는 방법은 무엇입니까? 계정이 비정상인 경우 어떻게 복구하나요? Mar 21, 2024 pm 04:57 PM

세계에서 가장 인기 있는 라이프스타일 공유 플랫폼 중 하나인 Xiaohongshu는 수많은 사용자를 끌어 모았습니다. 그렇다면 Xiaohongshu 계정을 등록하는 방법은 무엇입니까? 이번 글에서는 Xiaohongshu 계정 등록 과정을 자세히 소개하고, Xiaohongshu 계정 이상 현상을 복구하는 방법에 대한 질문에 답변해 드리겠습니다. 1. Xiaohongshu 계정을 등록하는 방법은 무엇입니까? 1. Xiaohongshu 앱 다운로드: 모바일 앱 스토어에서 Xiaohongshu 앱을 검색하여 다운로드하고 설치가 완료된 후 엽니다. 2. 계정 등록: Xiaohongshu 앱을 연 후 홈페이지 오른쪽 하단에 있는 '나' 버튼을 클릭한 후 '등록'을 선택하세요. 3. 등록 정보 입력: 프롬프트에 따라 휴대폰 번호, 비밀번호, 인증 코드 및 기타 등록 정보를 입력합니다. 4. 개인정보 입력: 등록이 완료되면 안내에 따라 이름, 성별, 생일 등 개인정보를 입력하세요. 5. 설정

qooapp 계정 등록 방법 qooapp 계정 등록 방법 Mar 19, 2024 pm 08:58 PM

qooapp은 많은 게임을 다운로드할 수 있는 소프트웨어인데 계정을 등록하는 방법은 무엇입니까? 아직 패스가 없는 경우 "등록" 버튼을 클릭한 후 등록 방법을 선택해야 합니다. 이 계정 등록 방법 소개는 사용법을 설명하기에 충분합니다. 다음은 자세한 소개이므로 살펴보십시오. qooapp 계정을 등록하는 방법 답변: 등록을 클릭한 후 등록 방법을 선택하세요. 구체적인 방법: 1. 로그인 인터페이스에 들어간 후 아직 패스가 없습니까? 2. 그런 다음 필요한 로그인 방법을 선택하십시오. 3. 그 후 바로 사용하시면 됩니다. 공식 웹사이트 등록: 1. 웹사이트 https://apps.ppaooq.com/을 열고 오른쪽 상단을 클릭하여 등록합니다. 2. 등록 선택

Huawei 휴대폰에서 이중 WeChat 로그인을 구현하는 방법은 무엇입니까? Huawei 휴대폰에서 이중 WeChat 로그인을 구현하는 방법은 무엇입니까? Mar 24, 2024 am 11:27 AM

Huawei 휴대폰에서 이중 WeChat 로그인을 구현하는 방법은 무엇입니까? 소셜 미디어의 등장으로 WeChat은 사람들의 일상 생활에 없어서는 안될 커뮤니케이션 도구 중 하나가 되었습니다. 그러나 많은 사람들이 동일한 휴대폰에서 동시에 여러 WeChat 계정에 로그인하는 문제에 직면할 수 있습니다. Huawei 휴대폰 사용자의 경우 듀얼 WeChat 로그인을 달성하는 것은 어렵지 않습니다. 이 기사에서는 Huawei 휴대폰에서 듀얼 WeChat 로그인을 달성하는 방법을 소개합니다. 우선, 화웨이 휴대폰과 함께 제공되는 EMUI 시스템은 듀얼 애플리케이션 열기라는 매우 편리한 기능을 제공합니다. 앱 듀얼 오픈 기능을 통해 사용자는 동시에

WeChat 등록 후 얼마나 지났는지 어떻게 확인하나요? WeChat에 등록된 기간을 확인하는 방법 WeChat 등록 후 얼마나 지났는지 어떻게 확인하나요? WeChat에 등록된 기간을 확인하는 방법 Mar 13, 2024 am 08:52 AM

WeChat은 풍부한 기능과 많은 사용자를 갖춘 인기 있는 소셜 소프트웨어입니다. 귀하가 WeChat에 등록한 기간을 확인하려는 경우, WeChat 자체에서 등록 시간 확인 기능을 직접 제공하지는 않지만 몇 가지 간접적인 방법을 통해 추측할 수 있습니다. 그러나 다양한 요인이 결과의 정확성에 영향을 미칠 수 있으므로 이러한 방법은 절대적으로 정확하지는 않습니다. 등록 시간에 대한 정확한 요구 사항이 있는 경우 WeChat 고객 서비스에 문의하여 상담하는 것이 좋습니다. WeChat 등록 후 얼마나 지났는지 어떻게 확인하나요? WeChat에 등록된 기간을 확인하는 첫 번째 방법은 QQ 메일함을 확인하는 것입니다. QQ를 사용하여 WeChat에 로그인하는 경우 등록이 성공적으로 완료되면 QQ 사서함에 WeChat에서 보낸 환영 이메일이 전송됩니다. QQ 메일함에서 "WeChat"을 검색하여 해당 이메일이 있는지 확인한 후 등록 시간을 확인할 수 있습니다. 두 번째 방법은 살펴보는 것입니다.

See all articles