使用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）是「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. 暴露了實際的錯誤。

玩得開心。