Помогни ни да направим Uroci.net по - богат! Добави урок

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

kvadrata   трудност:    видян: 22392

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

В този пример ще използваме 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>uroci.net - Пример с 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 = "&lt;span style='color:red'>Заето!&lt;/span>"; break;
          case "2":document.getElementById('message').innerHTML = "&lt;span style='color:green'>Свободно&lt;/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"

}

?>

Това е. Просто и ясно ;)



Коментари (15)

afera на 07.02 2007 в 21:23ч.
това го пробвах вече и работи супер!
kvadrata на 08.02 2007 в 13:53ч.
Ами лично го пробвах дали работи. Ако неработеше нямаше да пусна урока.
Лошото е че иска база данни, но неможах да го измисля без база данни :(
zhgmondi на 17.02 2007 в 11:15ч.
Във function checkUsername имаш едно document.getElementById('usermessage').innerHTML

Къде е елемента с ID 'usermessage'?
gogott на 04.05 2007 в 21:49ч.
хаха това не е ли един отбор с много як химн който играе фифа знае за какво говоря.The great AJAX
ANDiTKO на 22.07 2007 в 12:46ч.
Еми то горе долу от там идва името на езика.
Aeris на 01.12 2007 в 11:22ч.
Asynchronous JavaScript and XML
DeBre_NeO на 23.03 2008 в 18:30ч.
Във function checkUsername имаш едно document.getElementById('usermessage').innerHTML

Къде е елемента с ID 'usermessage'?
DeBre_NeO на 23.03 2008 в 18:37ч.
Но каквото и да си говориме урока е ПЕРФЕКТЕН !!!
Кратко и ясно :)
DeBre_NeO на 23.03 2008 в 18:43ч.
Нямаш елемент с ID "USERMESSAGE", имаш само такъв с ID "MESAGE" ...
azerot на 17.07 2008 в 14:22ч.
добро е и базата данни не е проблем! :)
dobritu на 01.09 2008 в 17:58ч.
Скрипта си работи, но има една грешка!
Там където е :
document.getElementById('usermessage').innerHTML = 'Проверяване...'; // Извеждаме надпис, че името се проверява

Трябва да е :
document.getElementById('message').innerHTML = 'Проверяване...'; // Извеждаме надпис, че името се проверява
защото долу в div таг-а id-то му е message
Karadras на 28.12 2008 в 20:58ч.
Би било хубаво да се добави mysql_close(); за да не окаже, че в даден момент, няма свободни конекции към базата данни
mortimor на 02.07 2009 в 17:31ч.
MySQL не пречи, но за урока можеше просто да проверяваш дали $_GET['username'] има стойност например "test_user" и да си връщаш статус ;)
nikssa23 на 28.02 2012 в 23:02ч.
Тук
if($num = mysql_num_rows($query))
трябва да е само така
if(mysql_num_rows($query)>0){
$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"
}

Но иначе браво , с леки промени в имената работи идеално +1 :)
miloshev на 18.01 2014 в 20:29ч.
по-добре ще е с jQuery + JSON

Регистрирайте се, за да добавите коментар


Калдейта ЕООД - © 2003-2010. Всички права запазени.
Препоръчваме: IT Новини