2013-04-17 56 views
0

我試圖使用Ajax(Javascript + php)來檢查用戶名稱是否可用,當用戶將焦點更改爲窗體的另一個字段時。我的功能只有當我有一些alert(),如果我刪除它們,功能停止工作。Javascript函數只能與其中的一些「alert()」一起使用

另一個奇怪的是alert(requestObject.readyState);只顯示狀態1.據我瞭解,它應該顯示所有狀態,或至少狀態4以及。

這是我的javascript代碼,它位於HTML頁面的標題中。

var requestObject = false; 
    function funcReceiveData() 
    { 
     alert(requestObject.readyState); 
     if(requestObject.readyState == 4) 
     { 
      if(requestObject.status == 200) 
      { 
       var status = requestObject.responseText; 
       if(status == "ok") 
       { 
        document.getElementById('userValid').innerHTML = 'Valid user'; 
       } 
       else 
       { 
        document.getElementById('userValid').innerHTML = 'Choose another username'; 
       } 
      } 
     } 
    } 

if (window.XMLHttpRequest) 
{ 
    requestObject = new XMLHttpRequest(); 
} 
else if(window.ActiveXObject) 
{ 
    requestObject = new ActiveXObject("Microsoft.XMLHTTP"); 
} 

function checkUser() 
{ 
    if(requestObject){ 
     requestObject.open("POST", "addUser.php", true); 
     requestObject.setRequestHeader("Content-type","application/x-www-form-urlencoded"); 
     var user = document.getElementById('username').value; 
     var tobesent = "username=" + user; 
     requestObject.send(tobesent); 
     requestObject.onreadystatechange = funcReceiveData(); 
     alert(tobesent); 
    } 
} 

這是我的HTML代碼的正文部分:

<BODY> 
<form method="POST" action="addUser.php"> 
    <table> 

     <tr> 
      <td><strong>Username:</strong></td> 
      <td><input type="text" name="username" size="25" onblur="checkUser();" id="username"></td> 
      <td><i id='userValid'>bla</i> 
     </tr> 

     <tr valign="top"> 
      <td><strong>Password:</strong></td> 
      <td><input type="password" name="password" size="25"></td> 
     </tr> 

     <tr valign="top"> 
      <td><strong>Frist name:</strong></td> 
      <td><input type="text" name="Fname" size="25"></td> 
     </tr> 

     <tr valign="top"> 
      <td><strong>Last name:</strong></td> 
      <td><input type="text" name="Lname" size="25"></td> 
     </tr> 

     <tr valign="top"> 
      <td><strong>Address line 1:</strong></td> 
      <td><input type="text" name="address1" size="50"></td> 
     </tr> 

     <tr valign="top"> 
      <td><strong>Address line 2:</strong></td> 
      <td><input type="text" name="address2" size="50"></td> 
     </tr> 

     <tr valign="top"> 
      <td><strong>City:</strong></td> 
      <td><input type="text" name="city" size="25"></td> 
     </tr> 

     <tr valign="top"> 
      <td><strong>Postcode:</strong></td> 
      <td><input type="text" name="postcode" size="25"></td> 
     </tr> 

     <tr valign="top"> 
      <td><strong>Phone:</strong></td> 
      <td><input type="text" name="phone" size="25"></td> 
     </tr> 

     <tr valign="top"> 
      <td><strong>Mobile:</strong></td> 
      <td><input type="text" name="mobile" size="25"></td> 
     </tr> 

     <tr valign="top"> 
      <td><strong>Email:</strong></td> 
      <td><input type="text" name="email" size="25"></td> 
     </tr> 
     <tr> 
      <td><input type="submit" value="Submit" /></td> 
      <td><input type="reset" value="Clear" /></td> 
     </tr> 
    </table> 
</form> 

我的PHP代碼如下,這是一個非常愚蠢的代碼只是爲了測試。在我將檢查數據庫中的用戶名後。

<?php 
$user = $_POST['username']; 
if($user == "Tiago") 
    echo("ok"); 
else 
    echo("Error"); 
?> 

我在這個地址託管的頁面:https://devweb2012.cis.strath.ac.uk/~ntb13105/WAD/tests/Twig/FINAL/addUser.html

有沒有人有什麼事情的任何線索?

回答

2

您是致電funcReceiveData而不是將其用作readyStateChange事件處理程序。

它不起作用,因爲那時HTTP請求沒有響應。在其中插入警報會延遲嘗試讀取requestObject.readyState的值,直到您單擊確定,這對於響應的到達時間足夠長。

刪除()並在發送請求之前分配事件處理程序。

requestObject.onreadystatechange = funcReceiveData; 
requestObject.send(tobesent); 
+0

謝謝!它現在工作:) –

相關問題