2009-10-23 108 views
0

在我的网站首页,我有一个新的用户注册表单。它包含一个字段“用户名”。当用户输入用户名并且焦点指向另一个字段时,会执行一个AJAX代码,用于检查是否有用户输入的用户名已经存在或不存在。[PHP/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块中包含了这些消息。作为服务器端,它没有显示消息。

请让我知道如何处理这个问题。是否修改调用AJAX的JavaScript代码或包含PHP中的某些内容。

请注意,我真正想要的是以绿色或红色显示消息。如果用户名可用,则用红色表示其他绿色。

+1

你有没有考虑过使用像JQuery这样的JavaScript库?我发现使用库(文件大小)的成本是由易用性和处理跨浏览器问题支付的。 – Vamos 2009-10-23 09:12:20

回答

0

如何让ajax.php返回一些预格式化的HTML并使用statechange_username函数来处理响应,将其保存在占位符div/span中?

顺便说一句,你为什么设置会话变量?

+0

会话变量在 – RKh 2009-10-23 09:15:29

+0

以上的PHP代码中使用我同意@No Surprises,尝试返回HTML而不是XML,除非您计划使用类似JQuery的库 – 2009-10-23 09:23:21

0

我猜你缺少statechange_username功能,像

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

我不认为任何东西都丢失,因为该网站工作正常除了我想要的颜色。 – RKh 2009-10-23 09:41:21

1

我会做到这一点使用jQuery和有PHP页面返回码(0为假,1为真)或类似的。然后,您可以使用jQuery的addClass()方法,具体取决于返回的结果,全部在javascript中。

+0

@Matt:你能说明一下吗? – RKh 2009-10-23 09:42:45

+0

查找jQuery Ajax文档,并简单地使用它来运行POST/GET调用到您的PHP脚本。如果用户名存在,则回显1,否则回显0.然后在ajax调用的'成功'参数中,可以解释响应,例如: 'if(response == 1){0}用户名')。addClass( '无效'); // username exists } else { $('#username')。addClass('valid'); //用户名是唯一的 }' – 2009-10-23 10:19:24

+0

我尝试了一百万个组合,无法在注释中获取代码格式以便工作,对不起。 – 2009-10-23 10:20:25