使用基於表單的身份驗證的登錄頁面中的問題

Question

我想要一個登錄頁面，如果任何用戶在單擊提交按鈕後鍵入無效的密碼或用戶名，則用戶將在同一頁面上顯示錯誤消息。

我該如何使這項要求成爲可能？這可能與Ajax或JavaScript？

Answer 1

是的，這可以通過Ajax實現。坦率地說，如果你使用類似Prototype,jQuery,Closure等的庫，最簡單，因爲它們消除了瀏覽器之間的差異，並且具有很多內置功能。

例如，這裏是你可以提交一個表單，並期待在使用Ajax與原型的響應相當簡潔的方式：

$('formid').request({ 
    onSuccess: function(response) { 
     // Request succeeded, check result for whether login was valid 
    } 
}); 

（即假設形式的ID爲「formid」。）

這是一個更完整的例子，它也顯示了你如何掛鉤提交過程。你可能會通過掛鉤窗體上的submit事件和發送Ajax請求，而不是觸發代碼：

$('formid').observe('submit', function(event) { 
    // Prevent the standard form submission 
    event.stop(); 

    // Do it via Ajax instead, including an additional flag telling 
    // the server that this is an Ajax call 
    this.request({ 
     parameters: {viaAjax: true}, 
     onSuccess: function(response) { 
      // Request succeeded, check result for whether login was valid 
      if (response.responseJSON && 
       response.responseJSON.loginOkay) { 
       // Login worked! 
      } 
     } 
    }); 
}); 

上面做這些事：

1. 鉤了一個Javascript處理程序，當用戶提交的形式
2. 通過取消通常的形式提交和發送Ajax調用，而不是
3. 隨着表單數據處理該事件，我們也包括viaAjax標誌告訴我們」服務器重新通過Ajax發送表單

服務器應該希望表單可以帶或不帶viaAjax標誌。如果該標誌位於那裏，這意味着瀏覽器支持JavaScript，並且表單以這種方式提交，所以它應該返回一個標誌，告訴我們登錄是否正常（在上面我已經假定它將返回JSON格式的數據{"loginOkay": true}，這意味着它應該將內容類型設置爲application/json）。如果標誌不是，那麼在瀏覽器上禁用Javascript，並且服務器應該以正常方式處理表單提交，返回完整的HTML頁面。 （無論Javascript是否啓用，處理它的業務被稱爲「漸進式增強」或「優雅降級」。）