使用 ajax 检查用户名可用性

Question

我想检查用户名是否可用。

我正在关注这个：http://phppot.com/demo/live-username-availability-check-using-php-and-jquery-ajax/

我不断收到错误警报，怎么了？

Ajax 调用：

function checkAvailability() {
    $("#loaderIcon").show();
    $.ajax({
        url: "check_availability.php",
        data:'username='+$("#username").val(),
        type: "POST",
        success:function(data){
            $("#user-availability-status").html(data);
            $("#loaderIcon").hide();
        },
        error:function (){alert("error");}
    });
}

服务器端：

<?php
/* this is check_availability.php  file */
  $con=  mysqli_connect('localhost','root','password','user') or die(mysqli_error());
  if($con)  { echo 'connected';}
  $username=mysqli_real_escape_string($con, $_POST['username']);
  $query="SELECT * FROM username_list WHERE     username='$username' ";
  $result=  mysqli_query($con,$query);
  $rowCount=  mysqli_num_rows($result);
  if($rowCount>0) {
      echo "<span class='status-not-available'> Not Available.</span>";
  } else {
      echo "<span class='status-available'> Username Available.</span>";
  }
?>

Answer 1

如果没有提到的更多信息和测试用例，很难确定发生了什么。

这是您的情况可能发生的情况：ajax 调用失败，我可以肯定地说，因为错误函数已执行

error - 类型：函数（jqXHR jqXHR，字符串 textStatus，字符串 errorThrown ） 请求失败时调用的函数。该函数接收三个参数：jqXHR（在 jQuery 1.4.x 中，XMLHttpRequest）对象、描述发生的错误类型的字符串和可选的异常对象（如果发生）。第二个参数的可能值（除了 null）是“timeout”、“error”、“abort”和“parsererror”。发生 HTTP 错误时，errorThrown 会接收 HTTP 状态的文本部分，例如“未找到”或“内部服务器错误”。从 jQuery 1.5 开始，错误设置可以接受一个函数数组。每个函数都会被依次调用。注意：跨域脚本和跨域 JSONP 请求不调用此处理程序。这是一个

问题可能是无法访问目标 - 更改您的代码，然后打开您的控制台以查看实际情况。我还将您的 ajax 调用更改为更好的格式：

function checkAvailability() {
   var username_tocheck = $("#username").val(); //Probably you want to validate it before you send
   $.ajax({
           url: "check_availability.php", // Try full url too
           data: { username :  username_tocheck },
           method: "POST",  //  POST | GET
           dataType: "html", // xml,json,script,html
           beforeSend: function() {
                 $("#loaderIcon").show();
           },
           success:function(data){
                 $("#user-availability-status").html(data);
                 $("#loaderIcon").hide();
           },
           error:function ( jqXHR, textStatus ){
                alert("error: " + textStatus);
                console.log("error: " + textStatus);
           }
   });
}

如你所见，我做了很多更改：

1. 将数据更改为对象。
2. 将type 更改为method。
3. 添加了dataType - 设置为您需要的任何内容。
4. 将加载程序图标移至 beforeSend 处理程序 - 您可能更喜欢将其隐藏在 always 处理程序中。
5. 暴露了实际错误。

尽情探索吧。