使用jquery、ajax和php-ajax()在未连接的本地服务器上检查用户名


Checking username on local server using jquery, ajax and php ajax() not connecting

所以我在本地系统上有一个mysql数据库,并使用PHP连接到该数据库。我知道服务器(Apache)并没有什么问题,因为我在另一个仅使用php的调用中使用过它。

我认为问题在于"ajax()请求

我才刚刚开始使用ajax。我遵循了一个教程来实现一种异步检查数据库中是否已经存在用户名的方法。

直到ajax()请求,所有代码都能正常工作。

我没有任何错误。我在屏幕上看到的都是这个代码的结果:

$("#availability_status").html('正在检查可用性…');//在span id="availability_status"中添加加载图像

我一整天都在寻找解决方案,这让我抓狂。提前谢谢!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
            "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
          <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>Register</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
        </script>
        <script type="text/javascript">
            $(document).ready(function() {  //When the dom is ready
                alert("ready!");
                $("#username").change(function() { //if therezs a change in the username textbox
                    var username = $("#username").val();//Get the value in the username textbox
                    if(username.length > 3)
                    {
                        $("#availability_status").html('<img src="loader.gif" align="absmiddle">&nbsp;Checking availability...');
                        //Add a loading image in the span id="availability_status"
                        $.ajax({ 
                            type: "POST",
                            url: "http://localhost/ajax_check_username.php",
                            data: {username: username}, 
                            success: function(server_response){
                                    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">
    <strong>Register</strong>
      <form action="http://localhost/register2a.php" method="get">
        <div class="style_form">
          <label for="username">Username :</label>
          <input type="text" name="username" id="username" class="form_element"/>
          <span id="availability_status"></span> </div>
        <div class="style_form">
          <label for="full_name">Full Name :</label>
          <input type="text" name="full_name" id="full_name" class="form_element"/>
        </div>
        <div class="style_form">
          <label for="email">Email  :</label>
          <input type="text" name="email" id="email" class="form_element"/>
        </div>
        <div class="style_form">
          <input name="submit" type="submit" value="submit" id="submit_btn" />
        </div>
      </form>
     </div>
    </body>
    </html>

////这是php文件

<?php
$conn = mysqli_connect('localhost', 'root', 'sherly743759', 'login');
//Include the Database connection file
if(isset($_POST['username']))//If a username has been submitted
{
    //check username not taken
    $conn = mysqli_connect('localhost', 'root', 'sherly743759', 'login');
    $username = mysql_real_escape_string($username);
    $query = "SELECT username FROM member WHERE username = '$username';";
    $result = mysql_query($query);
if(mysql_num_rows($result) > 0)
{
echo '1'; //Not Available
}
else
{
echo '0';  // Username is available
}
}
?>

我总是喜欢在AJAX问题上使用GET请求,这意味着在PHP上使用类型为"GET"的jQuery AJAX并使用GET读取参数。。因此,我可以通过在像这样的浏览器中运行PHP页面来轻松地测试它本身

localhost/ajax_check_username.php?username=something

您在Ajax调用中没有处理error的情况,只处理success——因此,如果Ajax调用失败,则不会重置"检查可用性"状态。

顺便说一下,你的PHP失败了,至少部分原因是你正在使用(但从未设置)$username。您还打开了数据库两次,但这可能是无害的。

<?php
  if(isset($_POST['username']))//If a username has been submitted
  {
    //check username not taken
    $conn = mysqli_connect('localhost', 'root', 'sherly743759', 'login');
    $username = mysql_real_escape_string($_POST['username']);
    $query = "SELECT username FROM member WHERE username = '$username';";
    $result = mysql_query($query);
    if(mysql_num_rows($result) > 0)
    {
      echo '1'; //Not Available
    }
    else
    {
      echo '0';  // Username is available
    }
  }

而且,您应该在PHP文件上省略关闭?>,这样就不会意外地回显额外的数据并破坏预期的结果。

需要检查您的jquery版本。它使用旧版本1.3。。。与不兼容

http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js