堆棧內存溢出
  簡體   English   中英

使用Ajax的注冊表單

[英]Signup form using Ajax

 原文  2014-02-07 14:56:32  7   1    javascript/ php/ ajax

問題描述

我目前有一個頁面.php（視圖）（主要包含html代碼），該頁面包含一個登錄表單和一個注冊表單。 在表單的操作中，我調用了.php文件（公共文件），該文件實例化了一個特定的控制器來處理兩種表單的輸入。 該控制器接收用戶輸入的數據，進行處理，檢查數據是否正確，然后進行插入（案例注冊）或選擇（案例登錄）。 如果有錯誤，它將把這些錯誤字符串傳遞給視圖，然后將其打印在屏幕上。

我現在想做的是使用Ajax（以前從未使用過，現在在Internet上讀過一點，對我幾乎一無所知）使它們成為最好的形式。 例如，我希望Ajax異步控制數據並打印結果（數據正確與否）。

目前，我已經完成了此操作，但是什么也沒做，它不起作用，它什么也沒有做..您能幫我嗎？

查看/LoginSignup.php 

    <form action="../public/index.php" method="post" id="modLogin_form" onSubmit="checkLogin()">
        Username:
        <input type="text" name="login_username" id="lu"/>

        Password:
        <input type="password" name="login_password" id="lp"/>

        <input type="submit" value="Login" name="login-submit" onClick="checkLogin()"/>
    </form>

    <form action="../public/indexSignup.php" id="modSignup_form" method="post" onSubmit="checkSignup()">
        Username:
        <input type="text" name="reg_username" id="ru"/>

        Password:
        <input type="password" name="reg_password" id="rp" />

        E-mail:
        <input type="text" name="reg_email" id="re" />

        <input type="submit" value="Sign up" name="reg-submit" onClick="checkSignup()"/>
    </form>

public / index.php 

    <?php 
    include_once '../Controller/LoginController.php';

    $controller = new LoginController();
    $view = $controller->invoke();
    $view->render();

public / indexSignup.php 

    <?php 
    include_once '../Controller/SignupController.php';

    $controller = new SignupController();
    $view = $controller->invoke();
    $view->render();

Controller / LoginController.php 

    class LoginController {
       public $user;
       public $userRepository;
       public $view;   
       //Crea un array per gli errori
       public $errorsL;

       public function __construct() {  
          $this->userRepository = new UserRepository();
          $this->errorsL = array();
          $this->view = new View('LoginSignup');
          $db = Database::getInstance(); 
       } 

       public function checkData($username, $password) {
          preg_match("/[\|\(\)<>%\*+={}@#']|(=)+(!)|[-]{2}/", $username, $arrayU);
          preg_match("/[\|\(\)<>%\*+={}@#']|(=)+(!)|[-]{2}/", $password, $arrayP);
          if($arrayU) {
             $this->errorsL['login-incorrectUsername'] = "Incorrect username.";
             $this->view->setData('errorsL', $this->errorsL);
             return false;
          }
          else if($arrayP) {
             $this->errorsL['login-incorrectPassword'] = "Incorrect password.";
             $this->view->setData('errorsL', $this->errorsL);
             return false;
          }
          else if($username === "" || $password === "") {
             $this->errorsL['login-empty'] = "Some field are empty, please try again.";
             $this->view->setData('errorsL', $this->errorsL);
             return false;
          }
          else {
             $this->user = $this->userRepository->findByUsername($username);
             if($this->user != NULL) {
                if($this->user->getPassword() === $password) {
                   return true;
                }
                else {
                   $this->errorsL['login-incorrectPassword'] = "Incorrect password.";
                   $this->view->setData('errorsL', $this->errorsL);
                   return false;
                }
             }
             else { 
                $this->errorsL['login-unregisteredUser'] = "There is no user with this username.";
                $this->view->setData('errorsL', $this->errorsL);
                return false;
             }
          }
       }

       public function checkLogin() {
          if(isset($_POST['login-submit'])) {
             if(isset($_POST['login_username']) && isset($_POST['login_password'])) {
                $username = $_POST['login_username'];
                $password1 = $_POST['login_password'];
                $password = addslashes($password1);
                if($this->checkData($username, $password)) {
                   $_SESSION['logged_in'] = 1;
                   $_SESSION['username'] = $username;
                   header("Location: ../public/home.php", true, 302);             
                }
             }
             else { 
                $this->errorsL['login-empty'] = "Some fields are empty.";
                $this->view->setData('errorsL', $this->errorsL); 
             }
          }
          else { 
             return;
          }
       } 

       public function invoke() {
          $this->checkLogin(); 
          return $this->view;
       }

    }

控制器/SignupController.php 

    class SignupController {

       public $user;
       public $userRepository;
       //Crea un array per gli errori e uno per i successi
       public $errorsR;
       public $successesR;
       public $view;   

       public function __construct() {  
          $this->userRepository = new UserRepository();
          $this->errorsR = array();
          $this->successesR = array();
          $this->view = new View('LoginSignup');
          $db = Database::getInstance();
       } 

       public function checkData($username, $password, $email) {
            //code..
       }

       public function checkUsername($username) {
            //code..
       }   

       public function checkPassword($password) {
            //code.. 
       }

       public function checkEmail($email) {
            //code..
       }   

       public function checkSignup() {

          if(isset($_POST['reg-submit'])) {

             if(isset($_POST['reg_username']) && isset($_POST['reg_password']) && isset($_POST['reg_email'])) {
                $username = $_POST['reg_username'];
                $password1 = $_POST['reg_password'];
                $email = $_POST['reg_email'];
                $password = addslashes($password1);

                if($this->checkData($username, $password, $email)) {
                   $db = Database::getInstance();               

                   $this->user = new User();
                   $this->user->setUsername($username);
                   $this->user->setEmail($email);
                   $this->user->setPassword($password);
                   $this->user->save();

                   $this->successesR['reg-completed'] = "Registration completed successfully.";
                   $this->view->setData('successesR', $this->successesR);
                }
             }
             else { 
                $this->errorsR['empty-field'] = "Some fields are incorrect.";
                $this->view->setData('errorsR', $this->errorsR); 
             }
          }
          else { 
             return;
          }      
       } 

       public function invoke() {
          $this->checkSignup();
          return $this->view; 
       }
    }

文件.js： 

function setXMLHttpRequest() {
   var xhr = null;
   if(window.XMLHttpRequest) {
     xhr = new XMLHttpRequest();
   }
   else if(window.ActiveXObject) {
     xhr = new ActiveXObject("Microsoft.XMLHTTP");
   }
   return xhr;
}

var xhrObj = setXMLHttpRequest();

function checkUsr(usr) {
   var url = "../indexSignup.php?checkusr=" + usr;
   xhrObj.open("GET", url, true);
   xhrObj.onreadystatechange = updateUsr;
   xhrObj.send(null);
}

function updateUsr() {
   if(xhrObj.readyState === 4) {
      var risp = xhrObj.responseText;
      document.getElementById("reg_username").innerHTML = risp;
   }
}

查看/LoginSignup.php 

  <form action="../public/index.php" method="post" id="modLogin_form" onSubmit="checkLogin()">
    Username:
    <input type="text" name="login_username" id="lu"/>

    Password:
    <input type="password" name="login_password" id="lp"/>

    <input type="submit" value="Login" name="login-submit" onClick="checkLogin()"/>
  </form>

  <?php
    if(isset($ajax)) {
      if(count($ajax) > 0) {
         print_r($ajax);
      }
    } 
  ?> 
  <form action="../public/indexSignup.php" id="modSignup_form" method="post" onSubmit="checkSignup()">
    Username:
    <input type="text" name="reg_username" id="ru" onChange="checkUsr(this.value);"/>

    Password:
    <input type="password" name="reg_password" id="rp" />

    E-mail:
    <input type="text" name="reg_email" id="re" />

    <input type="submit" value="Sign up" name="reg-submit" onClick="checkSignup()"/>
  </form>

控制器/SignupController.php 

  class SignupController {

     public $user;
     public $userRepository;
     //Crea un array per gli errori e uno per i successi
     public $errorsR;
     public $successesR;
     public $view; 
     public $ajax;

     public function __construct() {  
        $this->userRepository = new UserRepository();
        $this->errorsR = array();
        $this->successesR = array();
        $this->ajax = array();  
        $this->view = new View('LoginSignup');
        $db = Database::getInstance();
     } 

     public function checkData($username, $password, $email) {
            //code..
     }

     public function checkUsername($username) {
            //code..
     }   

     public function checkPassword($password) {
            //code.. 
     }

     public function checkEmail($email) {
            //code..
     }   

     public function checkSignup() {

        if(isset($_POST['reg-submit'])) {

           if(isset($_POST['reg_username']) && isset($_POST['reg_password']) && isset($_POST['reg_email'])) {
              $username = $_POST['reg_username'];
              $password1 = $_POST['reg_password'];
              $email = $_POST['reg_email'];
              $password = addslashes($password1);

              if($this->checkData($username, $password, $email)) {
                 $db = Database::getInstance();               

                 $this->user = new User();
                 $this->user->setUsername($username);
                 $this->user->setEmail($email);
                 $this->user->setPassword($password);
                 $this->user->save();

                 $this->successesR['reg-completed'] = "Registration completed successfully.";
                 $this->view->setData('successesR', $this->successesR);
              }
           }
           else { 
              $this->errorsR['empty-field'] = "Some fields are incorrect.";
              $this->view->setData('errorsR', $this->errorsR); 
           }
        }
        else { 
           return;
        }      
     } 

     public function checkAjax() {
        if(isset($_GET['checkusr'])){
            $usr = $_GET['checkusr'];
            $risp = $this->model->compareUsr($usr);
            $this->user = $this->userRepository->findByUsername($usr);
            if($this->user === NULL) {
              $this->ajax['err'] = "Username disponibile.";
              $this->view->setData('ajax', $this->ajax);              
            }
            else if($risp  > 0) {
              $this->ajax['succ'] = "Username non disponibile.";
              $this->view->setData('ajax', $this->ajax); 
            }
        }
     }

     public function invoke() {
        if(isset($_GET['checkusr'])) {
           $this->checkAjax();
        } 
        $this->checkSignup();
        return $this->view; 
     }
  }

    function checkLogin() {
      var username = document.getElementById('modLogin_form').login_username.value;
       var password = document.getElementById('modLogin_form').login_password.value;

       var patternUsername = new RegExp("[|()<>%*+=]|(=)+(!)|[-]{2}");  
       var patternPassword = new RegExp("[|()<>%*=+{}]|[-]{2}");

      if(username.search(patternUsername) > -1) { //Se la stringa inserita contiene dei caratteri speciali non consentiti
        alert("Invalid username. Please try again.");
        return false;
      }
      if(password.search(patternPassword) > -1) { //Se la stringa inserita contiene dei caratteri speciali non consentiti
        alert("Invalid password. Please try again.");
        return false;
      }   
      else if(username === "" || password === "") { //Se il messaggio e' vuoto
        alert("Username field or password field is empty. Please try again.");
        return false;
      }
       else if(username.length < 2 || username.length > 50) {
        alert("Invalid input: the username field must be 50 characters long and at least 2 characters.");
        return false;
       }
      else {
        return true;
      }
    }

    function checkSignup() {
      var username = document.getElementById('modSignup_form').reg_username.value;
       var password = document.getElementById('modSignup_form').reg_password.value;
       var email = document.getElementById('modSignup_form').reg_email.value;

       var patternUsername = new RegExp("/^[a-zA-Z0-9]+$/");  
       var patternPassword = new RegExp("[|()<>%*=+{}]|[-]{2}");
       var patternEmail = /[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}/igm;

      if(username.search(patternUsername) > -1) { //Se la stringa inserita contiene dei caratteri speciali non consentiti
        alert("Invalid username. Please try again.");
        return false;
      }
       else if(username.search(patternPassword) > -1) {
        alert("Invalid password. Please try again.");
        return false;
       }
       else if(!patternEmail.test(email)) {
        alert("Invalid email. Please try again.");
        return false;
       } 
      else if(username === "" || password === "" || email === "") { //Se il messaggio e' vuoto
        alert("Some field are empty. Please try again.");
        return false;
      }
       else if(username.length < 2 || username.length > 50) {
        alert("Invalid input: the username field must be 50 characters long and at least 2 characters.");
        return false;
       }
       else if(password.length < 2 || password.length > 100) {
        alert("Invalid input: the password field must be 100 characters long and at least 2 characters.");
        return false;
       }   
       else if(email.length < 2 || email.length > 50) {
        alert("Invalid input: the email field must be 50 characters long and at least 2 characters.");
        return false;
       }   
      else {
        return true;
      }
    }

1 個解決方案

解決方案1
 0  2014-02-07 16:07:49

  1. checkLogin（）和checkSignup（）JavaScript函數在哪里？ SignupController.php中有一個checkSignup（）-還要發布這些代碼。

  2. 在Firefox中使用Firebug通過控制台選項卡調試JavaScript錯誤，還可以在“ Net”選項卡和“ XHR”子選項卡中檢查XMLHttpRequest是否正常運行，為此需要為主機啟用Net。

    • 您也可以使用console.log進行調試，就像console.log（'Inside Ajax function'）;一樣。

  3. 將jQuery用於AJAX而不是原生JS，這很容易； 通過在網頁中包含jQuery。 在此處查看jQuery AJAX函數文檔。

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 PHP失敗的AJAX注冊表單 AJAX Mailchimp 注冊表單集成 使用Mootools的新聞稿注冊表，沒有頁面重新加載 使用JavaScript驗證注冊表單的自定義域？ 使用快速服務器制作注冊表單和登錄表單 使用護照使用NodeJs mongodb（mongoose）表達的注冊表單 使用PHP將注冊表單數據存儲到文本文件 注冊表單有多個步驟？ 反應注冊表 Phaser登錄/注冊表格
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM