폼 기반 인증을 사용하는 로그인 페이지에서의 문제

Question

제출 버튼을 클릭 한 후 잘못된 비밀번호 또는 사용자 이름을 입력하면 동일한 페이지에 오류 메시지가 표시되는 로그인 페이지를 원합니다.

이 요구 사항을 사용하려면 어떻게해야합니까? AJAX 또는 자바 스크립트로 가능합니까?

Answer 1

예, 이것은 Ajax에서 가능합니다. Prototype, jQuery, Closure 등의 라이브러리를 사용하면 브라우저의 차이점을 없애고 내장 기능이 많기 때문에 솔직히 말해서 가장 쉽습니다.

예를 들어, 여기 당신이 양식을 제출하고 프로토 타입으로 Ajax를 사용하여 응답을 볼 수 있습니다 상당히 간결 방법 :

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

(즉, 양식이 ID가 "formid"가 가정합니다.)

다음은 제출 프로세스에 어떻게 연결되는지 보여주는 완벽한 예제입니다. 당신은 양식에 submit 이벤트를 후킹하는 대신 아약스 요청을 전송하여 해당 코드를 실행할 수 있습니다

1. 후크까지 사용자가 제출되면위한 자바 스크립트 처리기 :

   $('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! 
         } 
        } 
       }); 
   }); 
   

   위의 것은이 일을 양식

2. 일반적인 양식 제출을 취소하고 Ajax 호출을 보내서 해당 이벤트를 처리합니다.
3. 양식 데이터와 함께 viaAjax 플래그를 포함하여 서버에 '

서버는 양식이 viaAjax 플래그를 포함하거나 포함하지 않고 도착할 것으로 예상해야합니다. 플래그가 있으면 브라우저가 자바 스크립트를 지원하고 양식이 그런 식으로 제출되었다는 것을 의미하므로 로그인이 괜찮은지 여부를 알려주는 플래그를 반환해야합니다 (위의 경우 나는 JSON 형식의 데이터를 반환한다고 가정했습니다). {"loginOkay": true}, 콘텐츠 유형을 application/json으로 설정해야 함을 의미합니다). 플래그가이 아닌 경우 브라우저에서 Javascript가 비활성화되고 서버는 정상적인 방법으로 양식 제출을 처리하여 전체 HTML 페이지를 반환해야합니다. (Javascript가 유효하게되어 있는지 어떤지에 관계없이 이것을 처리하는 것을 「점진적 향상」또는 「우아한 저하」라고합니다.)