如何與jquery進行HTTP身份驗證來驗證登錄系統？

Question

我想調出HTTP身份驗證框來處理我的登錄。但是，我想通過Ajax與我的數據庫進行通信。但我不知道如何連接HTTP身份驗證框與AJAX。

任何想法，如何做到這一點？還請包括例如

Answer 1

（令我驚訝的）的jQuery內置了support用於提供HTTP認證證書：

$.ajax({ 
    url: "http://example.org/", 
    username: "NAMENAMENAMENAMENAME", 
    password: "PWPWPWPWPWPWPWPWPWPW", 
    ... 
}) 

或者你可以重寫XMLHttpRequest對象就像這個例子：http://dothow.blogspot.com/2009/05/http-basic-authentication-with-jquery.html

Answer 2

基本HTML：

<form id="login-form" action="/login.php" method="post"> 
    <label for="username">Username: </label> 
    <input type="text" name="username" id="username"/><br /> 

    <label for="Password">Password: </label> 
    <input type="text" name="password" id="password"/><br /> 

    <input type="submit" value="Login"/> 
</form>​ 

基本的jQuery：

$(document).ready(function() { 
    $('#login-form').bind('submit', function (e) { 
     var self = $(this); 

     // See ajax: http://api.jquery.com/jQuery.post 
     // See serialize: http://api.jquery.com/serialize() 
     jQuery.post(self.attr('action'), self.serialize(), function() { 
      if (response.success) { 
       // wooo, logged in 
      } else { 
       alert("Invalid username or password. Please try again"); 
      } 
     }, 'json'); 

     e.preventDefault(); //prevent the form being posted 
    }); 
});​ 

基本PHP：

<?php 
if ($_POST['username'] == 'Admin' && $_POST['password'] == 'letmein') { 
    echo json_encode(array('success' => true)); 
} else { 
    echo json_encode(array('success' => false)); 
}; 
?> 

數據驗證的一點還是不錯的。