關於AJAX，PHP和處理表格

我想使用AJAX處理簡單的登錄表單。我認爲這很容易，但我無法完成所有工作。關於AJAX，PHP和處理表格

的index.php

<html> 
<head> 
<title>AJAX Login</title> 
<script type="text/javscript"> 
var XMLHttpRequestObject = false; 

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

    function logIn() { 
     if(XMLHttpRequestObject) { 
      var obj = document.getElementById("show"); 
      XMLHttpRequestObject.open("GET", "login.php"); 

      XMLHttpRequestObject.onreadystatechange = function() { 
       if(XMLHttpRequestObject.readyState == 4 
        && XMLHttpRequestObject.status == 200) { 
         obj.innerHtml = XMLHttpRequestObject.responseText; 
        } 
       } 

       XMLHttpRequestObject.send(null); 
      } 
     } 

</script> 
</head> 
<body> 
<form action="" method="post"> 
<table> 
    <tr> 
     <td>Username:</td> 
     <td><input type="username" name="username" /></td> 
    </tr> 
    <tr> 
     <td>Password:</td> 
     <td><input type="password" name="password" \ /></td> 
    </tr> 
    <tr> 
     <td colspan="2"><input type="submit" name="submit" value="login" onclick="logIn();" /></td> 
    </tr> 
</table> 
</form> 
<div id="show">should go here</div> 
</body> 
</html>

的login.php

<?php 
$username = "andrew"; 
$password = "andrew"; 

if($_POST['username'] != "") { 
    if($_POST['password'] != "") { 
     if(($_POST['username'] == $username) && ($_POST['password'] == $password)) { 
      echo "Login Success!"; 
      } 
      else { 
       echo "Login Failure!"; 
       } 
      } 
      else { 
       echo "You didn't enter a password"; 
       } 
      } 
      else { 
       echo "You didn't enter a username"; 
       } 
?>

當我點擊「登錄」按鈕，沒有任何反應。 :(

來源

2009-11-20 Andrew

我推薦你用一些JavaScript庫，例如jQuery的。這使AJAX變得如此簡單，並且正在處理所有（或幾乎所有）瀏覽器。 – Franz 2009-11-20 00:14:30

當您單擊該表單上的登錄名時，它將提交回源URL。爲了防止這種情況，你應該真正改變你的事件處理程序，要麼是：

function logIn() { 
    ... 
    return false; 
}

或者可以從提交處理程序做到這一點的形式，而不是提交按鈕單擊處理程序上。其次，要做AJAX跨瀏覽器，你需要大約6個後備條件，而不僅僅是XmlHttpRequest。請參閱Getting Started with AJAX and the XMLHttpRequest Object。

誠實地說，對於AJAX來說，我不會考慮在沒有幫助程序庫的情況下做這件事。我的優先選擇是jQuery的，在這種情況下，代碼最終看起來像這樣：

<form id="loginform" method="post"> 
<table> 
    <tr> 
    <td>Username:</td> 
    <td><input type="username" id="username" name="username" /></td> 
    </tr> 
    <tr> 
    <td>Password:</td> 
    <td><input type="password" id="password" name="password" \ /></td> 
    </tr> 
    <tr> 
    <td colspan="2"><input type="button" id="login" value="Login"/></td> 
    </tr> 
</table> 
</form>

有：

<script type="text/javascript"> 
$(function() { 
    $("#login").click(function() { 
    $("#show").load("login.php", { 
     username: $("#username").val(), 
     password: $("#password").val() 
    }, function() { 
     $("#loginform").hide(); // for example 
    }); 
    }); 
}); 
</script>

來源

2009-11-20 00:15:05 cletus

右半部分：因爲'onclick'事件未被取消，表單確實會觸發提交。但是，直到'logIn（）'函數觸發時，AJAX'.send（）'纔會被調用，而不是在頁面啓動時。 – 2009-11-20 00:20:19

另外，雖然跨瀏覽器兼容性很重要，而且jQuery確實使工作更輕鬆，但現在所有主流瀏覽器都支持'XmlHttpRequest'。所以僅僅使用它而沒有回退並不像以前那麼瘋狂。 – 2009-11-20 00:24:05

我想這會解決我的問題。我只是對jQuery產生了一些困惑（當我發現它的時候，我就開始玩弄它），但最近我感到無聊，所以我在我學校的圖書館拿了一本AJAX書。有沒有經過它，試圖學習AJAX，或者我應該去找一些jQuery教程，並試圖學習？ – Andrew 2009-11-20 00:26:14

你的PHP腳本期待變量作爲HTTP POST請求通過，但你的XMLHTTPRequest是做一個GET請求

你也做XMLHttpRequestObject.send(null); - 相反，你應該通過你的POST數據到.send()方法。

正如其他人所指出的那樣，使用JavaScript庫，例如jQuery會讓這種事情簡單了很多。

來源

2009-11-20 00:14:09

你是不是調用login（）函數的任何地方。最有可能的，它屬於onsubmit事件的形式。別忘了

return false;

最後。

來源

2009-11-20 00:14:12

不，他用'onclick =「logIn（）;」'得到了一個''，所以這不是問題。但是'return false;'是一個好主意，因爲你想取消'onclick'事件，因爲否則它會觸發'onsubmit'。 – 2009-11-20 00:18:44

關於AJAX，PHP和處理表格

回答

相關問題