Question

我写了一些ajax代码，它将值发送到php文件进行验证，但我遇到了问题。这是我的ajax代码：

<html>
<body>
<style>
#displayDiv{
background-color: #ffeeaa;
width: 200;
}
</style>
<script type="text/javascript">
function ajaxFunction(str)
{
var httpxml;
try
{
// Firefox, Opera 8.0+, Safari
httpxml=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
httpxml=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
httpxml=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
alert("Your browser does not support AJAX!");
return false;
}
}
}
function stateChanged()
{
if(httpxml.readyState==4)
{
document.getElementById("displayDiv").innerHTML=httpxml.responseText;

}
}
var url="username_exists.php?username=";
httpxml.onreadystatechange=stateChanged;
httpxml.open("GET",url,true);
httpxml.send(null);
}
</script>
</head>
<body>
<input type="text"
onkeyup="ajaxFunction(this.value);" name="username" /><div id="displayDiv"></div>
</body>
</html>

以上代码将值发送到username_exists.php：

<?php
$username = trim($_REQUEST['username']);

if (usernameExists($username)) {
  echo '<span style="color:red";>Username Taken</span>';
}
else {
  echo '<span style="color:green;">Username Available</span>';
}

function usernameExists($input) {
  // in production use we would look up the username in
  // our database, but for this example, we'll just check
  // to see if its in an array of preset usernames.
  $name_array =  array ('k','steve', 'jon', 'george', 'admin');

  if (in_array($input, $name_array)) {
    return true;
  }
  else {
    return false;
  }
}
?>

我的问题是，当文本框中放入任何用户名时，返回“用户名可用”！我做错了什么？

Answer 1

您正在发送一个空字符串作为用户名，以检查您的ajax调用。

var url="username_exists.php?username=";

我建议你开始使用jQuery来帮助你处理这个案例。你不需要担心跨浏览器问题，你也不需要编写所有这些代码行。

jQuery是一个很棒的javascript库。 http://www.jquery.com

在HTML文档的head部分中包含jquery库（我将使用CDN版本）并更改您的代码。

<强> HTML

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> 
</head>
<body>
<input type="text" id=txtUserName"  />
</body>

<强>的javascript

  $("#txtUserName").keyUp(function(){
   if($("#txtUserName").val()!="")
   {
      $.ajax({
        url: 'username_exist.php?username'+$("#txtUserName").val(),
        success: function(data) {
                alert(data);
        }
      });
  }
}

使用Ajax进行验证

1 个答案: