Преглед на урок

Проверка на потребителско име с AJAX и PHP

Проверка на потребителско име с AJAX и PHP




Това може да се използва при регистрацията на потребители. Когато потребителят напише потребителското име, с което иска да се регистрира и в реално време му се съобщава дали е свободно или заето. Пример можете да видите ТУК

В този пример ще използваме 2 страници: register.html и checkuname.php
Ще започнем с register.html

Код
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Studio-bg.com - Пример с AJAX и PHP</title>
</head>

<body>

<script language="javascript">
<!--

function checkUsername(username){
  document.getElementById('usermessage').innerHTML = 'Проверяване...'; // Извеждаме надпис, че името се проверява
  var xmlhttp=false; // Изчистваме променливата, която ще ползваме
  try {
    xmlhttp = new ActiveXObject('Msxml2.XMLHTTP'); // За Firefox
  } catch (e) {
    try {
      xmlhttp = new
      ActiveXObject('Microsoft.XMLHTTP'); // За IE
    } catch (E) {
      xmlhttp = false;
    }
  }
  if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
    xmlhttp = new XMLHttpRequest(); // Ако сме успели да активираме Active X, започваме XMLHttpRequest
  }
  var url = 'checkuname.php?username=' + username; // Път до PHP файла за проверка. Добавяме и GET променлива с името
  xmlhttp.open('GET', url, true); // Връзка с PHP файла
  xmlhttp.onreadystatechange=function() { // Обработване на получените данни за името
    if (xmlhttp.readyState==4) { // Проверяваме сме получили данни за името
      var content = xmlhttp.responseText; // Правим променлива с данните за името
      if( content ){
        switch(content){ // Ако PHP файла е отговорил с 1 - името е заето. Ако е отговорил с 2 е свободно
          case "1":document.getElementById('message').innerHTML = "<span style='color:red'>Заето!</span>"; break;
          case "2":document.getElementById('message').innerHTML = "<span style='color:green'>Свободно</span>"; break;
          default :document.getElementById('message').innerHTML = ""; break;
        }
      }
    }
  }
  xmlhttp.send(null) // Зануляване на XMLHttpRequest
  return;
}

-->
</script>


Потребител: <input type="text" name="username" onblur="checkUsername(this.value)" />
<div id="message"></div>

</body>
</html>


Ето и checkuname.php

Код
<?php

mysql_connect("localhost", "mysql_user", "mysql_password"); // Свързване към базата данни (поставете вашите данни!)
mysql_select_db("mysql_db"); // Избиране на базата данни

if(isset($_GET['username'])){

	$uname = $_GET['username'];
	$query = mysql_query("SELECT * FROM users WHERE username = '$uname'");
	if($num = mysql_num_rows($query)){
		echo "1"; // Ако потребителското име съществува връщаме "1"
	}else{ echo "2"; } // Ако не съществува връщаме "2"

}

?>

При проблеми пишете тук или във форума!



Ако урокът ви допада, споделете го в Twitter и Facebook или го запазете в Delicious.




Урокът е добавен от: toddor

Добави коментар

Трябва да сте регистиран потребител за може да оставяте коментари! Направете своята безплатна регистрация още сега.