AJAX мгновенная проверка с php и javascript

Question

Я разрабатываю небольшой веб-сайт, где мне нужно обрабатывать регистрацию пользователя. Как обычно, если пользователь запрашивает имя пользователя, которое уже используется, системе не разрешается продолжать регистрацию.

Я хочу проверить, что во время регистрации, как это делают большинство современных веб-сайтов. Как мне это сделать с помощью AJAX?

Регистрация Форма:

<div class="container"> 
     <form id="register_form" action="actions/register_action.php" method="post"> 

      <div class="form-group"> 
       <label for="name_area">Name</label> 
       <input type="text" name="name" class="form-control" placeholder="Name"> 
      </div> 
      <div class="form-group"> 
       <label for="username_area">Username</label> 
       <input type="text" name="username" class="form-control" id="username_id" placeholder="Username"> 
      </div> 
      <div class="form-group"> 
       <label for="email_area">Email</label> 
       <input type="email" name="email" class="form-control" placeholder="Email"> 
      </div> 
      <div class="form-group"> 
       <label for="pass_area">Password</label> 
       <input type="password" name="pass" class="form-control" placeholder="Password"> 
      </div> 
      <div class="form-group"> 
       <label for="conf_pass_area">Confirm password</label> 
       <input type="password" name="conf_pass_area" class="form-control" placeholder="Confirm password"> 
      </div> 
      <br> 
      <div class="form-group"> 
       <input type="submit" class="btn btn-primary" id="button_area" placeholder="Submit"> 
       <!--action to:register_action!--> 
      </div> 
     </div> 
    </form> 
    </div> 

users.php (где я делаю свою функцию PHP относительно пользователей):

<?php 
    //checks if username inserted is already in use 
    function check_username($username_pretended) { 
     global $conn; 

     $stmt = $conn->prepare('SELECT * FROM CommonUsers WHERE username=?'); 
     $stmt->execute(array($username_pretended)); 

     $res = $stmt->fetch(); 

     if($res['username'] == "") { 
      return false; 
     } 
     else return true; 
    } 

    //inserts an user in the database 
    function insertUser($name, $username, $email, $password) { 
     global $conn; 

     $stmt = $conn->prepare('INSERT INTO CommonUsers(name, username, email, password) VALUES (?, ?, ?, ?)'); 
     $stmt->execute(array($name, $username, $email, $password)); 
    } 
?> 

Answer 1

Из верхней части моей головы:

$("#username_id").on("change", function() 
{ 
    $.ajax(
    { 
     method: "get", // or maybe post? 
     url: "yoururlhere", 
     data: 
     { 
      username: $(this).val() 
     }, 
     success: function(data) 
     { 
      if (data == "0") 
      { 
       // Hide warning 
      } 
      else 
      { 
       // Warn user that username is already taken 
      } 
     } 
    }); 
}); 

Это самый простой способ сделать это. Его отправка имени пользователя на сервер для проверки. Конечно, вам понадобится элемент для отображения предупреждения (которого я не смог найти в DOM).

Подробные сведения можно найти в ajax() method docs.

В файле PHP:

$username = $_GET["username"]; 

if (check_username($username)) 
{ 
    return "1"; 
} 
else 
{ 
    return "0"; 
}