Php 用Ajax进行验证_Php_Ajax - Fatal编程技术网

Php 用Ajax进行验证

php ajax

Php 用Ajax进行验证,php,ajax,Php,Ajax,我编写了一些ajax代码，将值发送到php文件进行验证，但我遇到了一个问题。这是我的ajax代码： <html> <body> <style> #displayDiv{ background-color: #ffeeaa; width: 200; } </style> <script type="text/javascript"> function ajaxFunction(str) { var httpxml; try { // Fi

我编写了一些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>


#displayDiv{
背景色：#ffeeaa；
宽度：200；
}
函数ajaxFunction（str）
{
var-httpxml；
尝试
{
//Firefox、Opera 8.0+、Safari
httpxml=新的XMLHttpRequest（）；
}
捕获（e）
{
//Internet Explorer
尝试
{
httpxml=新的ActiveXObject（“Msxml2.XMLHTTP”）；
}
捕获（e）
{
尝试
{
httpxml=新的ActiveXObject（“Microsoft.XMLHTTP”）；
}
捕获（e）
{
警告（“您的浏览器不支持AJAX！”）；
返回false；
}
}
}
函数stateChanged（）
{
if（httpxml.readyState==4）
{
document.getElementById（“displayDiv”）.innerHTML=httpxml.responseText；
}
}
var url=“username_exists.php？username=”；
httpxml.onreadystatechange=stateChanged；
open（“GET”，url，true）；
httpxml.send（null）；
}

上面的代码将值发送到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;
  }
}
?>

您正在发送一个空字符串作为用户名，以通过ajax调用进行检查
var url="username_exists.php?username=";

我建议您开始使用jQuery来帮助您处理这种情况。您不需要担心跨浏览器问题，也不需要编写所有这些代码行
jQuery是一个很棒的javascript库
在HTML文档的头部部分包括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>

这首先需要一些基本的调试。$username的值是多少？在哪一点比较失败？我添加以下代码：var val=document.getElementById（“username”）.value；httpxml.onreadystatechange=stateChanged；open（“GET”，url+val，true）；但它不起作用yet@Srive：您正在使用getElementById方法。但是你没有文本框的ID。添加Id=“username”并重试。getElementById（）是一个函数，它仅通过元素的Id属性选择元素。使用jQuery，作为另一个可行的解决方案，也是上面建议的，根据字段名称选择字段，您可以执行：$（“input[name='username']”）val（）；
  $("#txtUserName").keyUp(function(){
   if($("#txtUserName").val()!="")
   {
      $.ajax({
        url: 'username_exist.php?username'+$("#txtUserName").val(),
        success: function(data) {
                alert(data);
        }
      });
  }
}