首頁 後端開發 php教程 PHP+AJAX實現無刷新註冊(帶用戶名即時檢測)_PHP教程

PHP+AJAX實現無刷新註冊(帶用戶名即時檢測)_PHP教程

Jul 21, 2016 pm 04:00 PM
php+ajax 個人 資訊 重新整理 即時 實現 我們 提交 偵測 註冊

很多時候,我們在網上註冊個人信息,在提交完頁面後,總得等待頁面刷新來告訴我們註冊是否成功,遇到網絡差的時候,如果註冊了一大串的東西,在經過漫長的等待頁面刷新後,得到的確是「您的用戶名已被使用」或XXXXXXX不合法,我想大家的心情一定特別不爽,今天就介紹個AJAX實現頁面不刷新註冊+實時檢測用戶信息的簡單註冊程序,希望對大家有幫助。好的,先看註冊介面代碼:
   


  
   

  


      
  " align="left" bgcolor="#FFFFFF">  · 使用者名稱:         
        
        
      
      
        
          
         pwd"> 密碼字母有大小寫。 6-16位(包括6、16),限用英文、數字。
      
         
                 
   
>
        
    >
4-16個字符,英文小寫、漢字、數字、最好不要全部是數字。
使用者密碼
         
>
          *        
  
          >

           *       repwd"> 請再次輸入登入密碼。


   如圖:

   如圖:


紅色部分就是一會要呼叫的js函數了,當我們選定一個文字方塊後就會開始調用,現在我們看上面那個頁麵包含的ajaxreg.js檔案的程式碼,裡面就是包含了ajax框架和一些判斷函數。
   var http_request=false;
  function send_request(url){//初始化,指定處理函數,發送請求的函數
    >        if(window.XMLHttpRequest){//Mozilla瀏覽器
         http_request=new XMLHttpRequest();
   http_request=new XMLHttpRequest();
            http_request.overrideMimeType("text/xml" );
         }
        }
        else if(window)     http_request=new ActiveXObject("Msxml2.XMLHttp");
         } catch(e){
          try{
          http_request=new ActiveXobject("Microsoft.XMLHttp") 🠎>   }
    }
        if(!http_request ){//異常,建立物件執行個體失敗
         window.alert("建立XMLHttp物件失敗!");
         return false;
         return false;
         return false;        //決定傳送請求方式,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;
       }🎜>        alert("您所要求的頁面不正常! ");
         }
   }
  }
  function usercheck(obj){
>useroff; if (username==""){
   document.getElementById(obj).innerHTML=" 使用者名稱不能為空! ";
        f.username.focus();
        return false;
    }   send_request('checkuserreg.php?username=' username);
   reobj=obj;
   }
 document.reg;
        var pwd=f.userpwd.value;
        if(pwd==""){
       if(pwd==""){
       if(pwd==""){
為空!
";
          f.userpwd.focus();
          return false;
            document.getElementById (obj).innerHTML=" 密碼長度不能小於6位元! ";
          f.userpwd.focus();
          return false;
       document.getElementById(obj).innerHTML=" 密碼符合要求! ";
        }
  }
  function pwdrecheck(obj){
    var f=document.reg;    var f=document。        if ( repwd==""){
          document.getElementById(obj).innerHTML=" 請再輸入一次密碼!";
          f.reuserpwd.focus();
          return false;
   . .reuserpwd.value){
document.getElementById(obj).innerHTML=" 兩次輸入的密碼不一致! ";
          f.reuserpwd.focus();
          return false;
       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);
  $result=$db->query($querysql);
  $rows=$db> loop_query($result);
  //若會員名已註冊
  //----------------------------- -------------------------------------------------- ----
  if($rows){
          echo" 此會員名已註冊,請更換會員名稱!";
  }
 /會員名未註冊則顯示
  //-------------------------------------- ---------------------------------------------
  else{
          echo" 此會員名稱可註冊! ";
  }
  if($action==reg){
  $addsql="insert into cr_userinfo
        wd values(0,5000,07$name' $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.
screen.width*0.7) {this.resized=true; this.width=螢幕.width*0.7; this.alt='點擊這裡開啟新視窗nCTRL滑鼠滾輪放大/縮小';} " border=0>


2.


3.
screen.width*0.7) {this.resized=true; this.width=螢幕.width*0.7; this.alt= '點這裡開啟新視窗nCTRL滑鼠滾輪放大/縮小';}" border=0>

4.


5.
screen.width*0.7) {this.resized=true; this.width=螢幕.width*0.7; this.alt='點擊這裡打開新視窗nCTRL滑鼠滾輪放大/縮小';}" border=0>

怎麼樣?還不錯吧,貼得累死了,希望大家喜歡~~~~

www.bkjia.comtruehttp: //www.bkjia.com/PHPjc/317173.htmlTechArticle很多時候,我們在網路上註冊個人資訊,在提交完成頁面後,總是得等待頁面來告訴我們註冊是否成功,遇到網路差的時候,如果註冊了一大...
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
1 個月前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
1 個月前 By 尊渡假赌尊渡假赌尊渡假赌
威爾R.E.P.O.有交叉遊戲嗎?
1 個月前 By 尊渡假赌尊渡假赌尊渡假赌

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

小紅書怎麼註冊多個帳號?註冊多個帳號會被發現嗎? 小紅書怎麼註冊多個帳號?註冊多個帳號會被發現嗎? Mar 25, 2024 am 09:41 AM

小紅書作為一個集社交和電商於一身的平台,吸引了越來越多的用戶加入。有些用戶希望能夠註冊多個帳號以便更好地體驗和小紅書互動。那麼,小紅書要怎麼註冊多個帳號呢?一、小紅書怎麼註冊多個帳號? 1.使用不同手機號碼註冊目前,小紅書主要採用手機號碼註冊帳號的方式。用戶有時會嘗試購買多個手機號碼卡,並利用它們註冊多個小紅書帳號。但這種做法有一些限制,因為購買多個手機號碼卡比較麻煩且成本較高。 2.使用信箱註冊除了手機號碼,信箱也可以用來註冊小紅書帳號。使用者可以準備多個郵箱地址,然後分別用這些郵箱地址註冊帳號。不過

漫蛙漫畫帳號怎麼註冊 漫蛙漫畫帳號怎麼註冊 Feb 28, 2024 am 08:00 AM

在漫蛙漫畫平台上,有著豐富的漫畫資源,等待大家探索。只要輕鬆進入漫蛙漫畫的官方平台,就能享受各類精彩的漫畫作品。每個小夥伴都能依照自己的喜好,輕鬆找到心儀的漫畫進行閱讀。那麼究竟該如何註冊漫蛙漫畫的官方帳號呢,本站小編就將為大家帶來這篇詳細的教程攻略,希望能幫助到各位有需要的小伙伴們。漫蛙漫畫-官方入口:https://fuw11.cc/mw666漫蛙漫畫app下載地址:https://www.siemens-home.cn/soft/74440.html漫蛙漫畫非大陸地區入口:https: /

F5刷新金鑰在Windows 11中不起作用 F5刷新金鑰在Windows 11中不起作用 Mar 14, 2024 pm 01:01 PM

您的Windows11/10PC上的F5鍵是否無法正常運作? F5鍵通常用於刷新桌面或資源管理器或重新載入網頁。然而,我們的一些讀者報告說,F5鍵正在刷新他們的計算機,並且無法正常工作。如何在Windows11中啟用F5刷新?要刷新您的WindowsPC,只需按下F5鍵即可。在某些筆記型電腦或桌上型電腦上,您可能需要按下Fn+F5組合鍵才能完成刷新操作。為什麼F5刷新不起作用?如果按下F5鍵無法刷新您的電腦或在Windows11/10上遇到問題,可能是因為功能鍵被鎖定。其他潛在原因包括鍵盤或F5鍵

怎麼註冊小紅書帳號?註冊小紅書帳號需要什麼? 怎麼註冊小紅書帳號?註冊小紅書帳號需要什麼? Mar 22, 2024 am 10:16 AM

小紅書,一個集生活、娛樂、購物、分享於一體的社交平台,已成為許多年輕人日常生活中不可或缺的一部分。那麼,如何註冊小紅書帳號呢?一、怎麼註冊小紅書帳號? 1.開啟小紅書官網或下載小紅書APP。點擊下方的「註冊」按鈕,您可以選擇不同的註冊方式。目前,小紅書支援手機號碼、信箱以及第三方帳號(如微信、QQ、微博等)進行註冊。 3.填寫相關資料。根據選擇的註冊方式,填寫相應的手機號碼、郵箱或第三方帳號資訊。 4.設定密碼。設定一個強壯的密碼,確保帳號安全。 5.完成驗證。根據提示完成手機驗證或信箱驗證。 6.完善個人

小紅書帳號怎麼註冊?它的帳號異常怎麼恢復? 小紅書帳號怎麼註冊?它的帳號異常怎麼恢復? Mar 21, 2024 pm 04:57 PM

小紅書作為全球最受歡迎的生活方式分享平台之一,吸引了大量用戶關注。那麼,如何註冊小紅書帳號呢?本文將為您詳細介紹小紅書帳號的註冊流程,並解答小紅書帳號異常如何復原的問題。一、小紅書帳號怎麼註冊? 1.下載小紅書APP:在手機應用程式商店搜尋並下載小紅書APP,安裝完成後開啟。 2.註冊帳號:開啟小紅書APP後,點選首頁右下角的「我」按鈕,然後選擇「註冊」。 3.填寫註冊資料:依照指示填寫手機號碼、設定密碼、驗證碼等註冊資料。 4.完善個人資料:註冊成功後,根據指示完善個人資料,如姓名、性別、生日等。 5.設定

qooapp帳號怎麼註冊 qooapp帳號怎麼註冊 Mar 19, 2024 pm 08:58 PM

qooapp是能夠下載很多遊戲的軟體,那麼帳號怎麼註冊呢?用戶們需要點擊還沒有通行證,去註冊這個按鍵,然後選擇一種註冊方式就可以了。這篇帳號註冊方法介紹夠告訴大家具體該怎麼操作,以下就是具體的介紹,趕快看看吧。 qooapp帳號怎麼註冊答:點選去註冊,然後選擇一種註冊方式具體方法:1、先進入登入介面後,點選下面的還沒有通行證?現在申請。 2、之後選擇一個自己需要的登入方式。 3、之後就能夠直接使用了。官網註冊:1.開啟網站https://apps.ppaooq.com/,點選右上角註冊。 2、選擇註冊

華為手機如何實現雙微信登入? 華為手機如何實現雙微信登入? Mar 24, 2024 am 11:27 AM

華為手機如何實現雙微信登入?隨著社群媒體的興起,微信已成為人們日常生活中不可或缺的溝通工具之一。然而,許多人可能會遇到一個問題:在同一部手機上同時登入多個微信帳號。對於華為手機用戶來說,實現雙微信登入並不困難,本文將介紹華為手機如何實現雙微信登入的方法。首先,華為手機自帶的EMUI系統提供了一個很方便的功能-應用程式雙開。透過應用程式雙開功能,用戶可以在手機上同

如何看微信註冊多久了?看微信註冊了多久的方法 如何看微信註冊多久了?看微信註冊了多久的方法 Mar 13, 2024 am 08:52 AM

微信是一款廣受歡迎的社群軟體,功能豐富,用戶眾多。想要查看微信註冊了多久,雖然微信本身並未直接提供查看註冊時間的功能,但我們可以透過一些間接方式來推測。但是這些方法並非絕對準確,因為各種因素都可能影響結果的精確性。若對註冊時間有精確需求,建議聯絡微信客服諮詢。如何看微信註冊多久了?看微信註冊了多久的方法第一種方法是透過查看QQ郵箱。如果你使用QQ登入的微信,那麼註冊成功後,QQ郵箱會收到微信發送的歡迎郵件。你可以在QQ郵箱中搜尋「微信」查看是否有這樣的郵件,進而確定註冊時間。第二種方法是透過檢視

See all articles