使用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調用失敗，可以肯定地說，因為執行了錯誤函數

錯誤 -類型：Function（jqXHR jqXHR，字符串textStatus，字符串errorThrown）的函數，如果請求不被調用。 該函數接收三個參數：jqXHR對象（在jQuery 1.4.x中為XMLHttpRequest），一個描述發生錯誤的類型的字符串，以及一個可選的異常對象（如果發生）。 第二個參數（除null外）的可能值為“超時”，“錯誤”，“中止”和“ 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. 暴露出實際錯誤。

祝您探索愉快。