Question

我遵循这个例子：

http://youhack.me/2010/05/04/username-availability-check-in-registration-form-using-jqueryphp/comment-page-1/#comments

主要的不同之处在于我将连接更改为sqli

我试着注释掉if，这个页面可以正确地回显0或1 ajax_check_username.php

<?php
include 'include\connection.php';
include 'include\opendb.php';

include("Header.php"); 
//Include The Database Connection File 

if(isset($_POST['username']))//If a username has been submitted 
{
$username = mysqli_real_escape_string($con, $_POST['username']);//Some  clean up :)

$check_for_username = mysqli_query($con, "SELECT lol_summoners_name     FROM lol_summoners WHERE lol_summoners_name = '$username'");

//Query to check if username is available or not 

if(mysqli_num_rows($check_for_username))
{
echo '1';//If there is a  record match in the Database - Not Available
}
else
{
echo '0';//No Record Found - Username is available 
}

}

?>
<?php 
//close connection
include 'include\closedb.php';
?>

//Here is the signup.php

<html>

<?php
include 'include\connection.php';
include 'include\opendb.php';

// include("Header.php"); 
 ?>
<head>
<title>Sign up</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"               type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function()//When the dom is ready 
{
$("#username").change(function() 
{ //if theres a change in the username textbox

var username = $("#username").val();//Get the value in the username textbox
if(username.length > 3)//if the lenght greater than 3 characters
{
$("#availability_status").html('<img src="loader.gif"   align="absmiddle">&nbsp;Checking availability...');
//Add a loading image in the span id="availability_status"

$.ajax({  //Make the Ajax Request
type: "POST",  
url: "ajax_check_username.php",  //file name
data: "username="+ username,  //data
success: function(server_response){  

   $("#availability_status").ajaxComplete(function(event, request){ 

 if(server_response == '0')//if ajax_check_username.php return value "0"
 { 
 $("#availability_status").html('<img src="available.png" align="absmiddle">        <font  color="Green"> Available </font>  ');
//add this image to the span with id "availability_status"
    }  
else  if(server_response == '1')//if it returns "1"
{  
 $("#availability_status").html('<img src="not_available.png"   align="absmiddle">   <font color="red">Not Available </font>');
}  

   });
   } 

  }); 

}
else
{

$("#availability_status").html('<font color="#cc0000">Username too      short</font>');
//if in case the username is less than or equal 3 characters only 
}



return false;
});

});
</script>
</head>

<body>

<div id="content">
<form action="user_check.html" method="get">
<div>
<label for="username">Username :</label>
<input type="text" name="username" id="username"/>
<span id="availability_status"></span> </div>
<div>
<label for="full_name">Full Name :</label>
<input type="text" name="full_name" id="full_name"/>
</div>
<div>
<label for="email">Email&nbsp; :</label>
<input type="text" name="email" id="email"/>
</div>
<div>
<input name="submit" type="submit" value="submit" id="submit_btn" />
</div>
</form>
</div>

</body>

<?php 
    /* close connection */
    include 'include\closedb.php';
?> 

</html>

Answer 1

用这个

替换你当前的ajax函数

$.ajax({  //Make the Ajax Request
type: "POST",  
url: "ajax_check_username.php",  //file name
data: "username="+ username,  //data
success: function(server_response){        
 if($.trim(server_response) == '0')
 { 
   $("#availability_status").html('<img src="available.png" align="absmiddle">        <font  color="Green"> Available </font>  ');
 }  
 else  if($.trim(server_response) == '1')
 {  
    $("#availability_status").html('<img src="not_available.png"   align="absmiddle">     <font color="red">Not Available </font>');
 }
 else
 {
   $("#availability_status").html('Unknown response: '+server_response+' Length of string: '+server_response.length);   
 }  

}  

});

您无需在ajax调用的ajaxComplete函数内执行success。

此外，最好在您的情况下使用blur函数代替change。

ajax用户名检查只是继续加载

1 个答案: