使用基于表单的身份验证的登录页面中的问题

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是否启用，处理它的业务被称为“渐进式增强”或“优雅降级”。）