[PHP / AJAX]: изменить цвет сообщения в соответствии с введенным текстом

Question

На домашней странице моего сайта появилась новая форма регистрации пользователей. Содержит поле & Quot; Имя пользователя & Quot ;. Когда пользователь вводит имя пользователя и фокус направлен на другое поле, выполняется код AJAX, который проверяет, существует ли какой-либо пользователь с введенным именем пользователя.

Код AJAX, который я использую, таков:

function toggle_username(userid) { 
    if (window.XMLHttpRequest) { 
        http = new XMLHttpRequest(); 
    } else if (window.ActiveXObject) { 
        http = new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
    handle = document.getElementById(userid); 
    var url = 'ajax.php?'; 
    if(handle.value.length > 0) { 
        var fullurl = url + 'do=check_username_exists&username=' + encodeURIComponent(handle.value); 
        http.open("GET", fullurl, true); 
        http.send(null); 
        http.onreadystatechange = statechange_username; 
    }
    else
    { 
        document.getElementById('username_exists').innerHTML = ''; 
    }
}

Файл " AJAX.PHP " вызывается приведенным выше кодом, выглядит так:

<?php 
mysql_connect ('localhost', 'MyServer', 'user1'); 
mysql_select_db('globaldb'); 

$do = $_GET['do']; 
switch($do) { 
    case 'check_username_exists': 
        if(get_magic_quotes_gpc()) { 
            $username = $_GET['username']; 
        }else{ 
            $username = addslashes($_GET['username']); 
        } 
        $count = mysql_num_rows(mysql_query("SELECT * FROM `student_login` WHERE `username`='".$username."'")); 
        header('Content-Type: text/xml'); 
        header('Pragma: no-cache'); 
        echo '<?xml version="1.0" encoding="UTF-8"?>'; 
        echo '<result>'; 
        if($count > 0) {
            $_SESSION['UserExists'] = "true";

        }else{ 
            $_SESSION['UserExists'] = "false";
        } 
        $_SESSION['UserExists'] = "false";
        echo '</result>'; 
    break; 
    default: 
        echo 'Error, invalid action'; 
    break; 
} 
?>

В моей регистрационной форме, чуть ниже поля ввода имени пользователя, я хочу определить раздел, в котором я могу показывать сообщения:

Пользователь с таким именем существует или

Имя пользователя доступно.

На своей домашней странице я использую следующий код:

<input name="username" type="text" id="username"  onchange="toggle_username('username')" style="width:150px;" maxlength="40" size="22" >

<?PHP

   if ($_SESSION['UserExists'] == "true")
   {
    echo "<div id='username_exists' style='font-size: 11px;font-weight: bold;color:red'>User with this name unavailable.</div>";
   }
  else
  {
        echo "<div id='username_exists' style='font-size: 11px;font-weight: bold;color:darkgreen'> User with this name is available </div>";
  }
?>

Домашняя страница состоит из приведенного выше кода и первого блока кода (JavaScript) сверху, который я дал.

Этот код не работает. И я думаю, причина в том, что я включил сообщения в блок PHP. Будучи серверной стороной, он не показывает сообщения.

Пожалуйста, дайте мне знать, как решить эту проблему. Изменять ли код JavaScript, который вызывает AJAX, или включать что-то в PHP.

Обратите также внимание, что на самом деле я хочу, чтобы сообщения отображались зеленым или красным цветом. Если имя пользователя доступно, тогда выберите зеленый цвет красным цветом.

Answer 1

Я бы сделал это, используя jQuery, чтобы страница PHP возвращала код (0 для false, 1 для true) или аналогичный. Затем вы можете использовать метод addClass () jQuery в зависимости от возвращаемого результата, все в javascript.

Answer 2

Как насчет того, чтобы ajax.php возвращал немного предварительно отформатированного HTML-кода и использовал функцию statechange_username, которую вы настроили для обработки ответа, чтобы вставить его в заполнитель div / span?

Кстати, почему вы устанавливаете переменную сеанса?

Answer 3

Полагаю, вам не хватает функции statechange_username, что-то вроде

function statechange_username() 
{ 
    if (http.readyState==4)
    { 
        document.getElementById(\"username_eixsts\").innerHTML=http.responseText;
    }
}