2011-09-25 5 views
0

I가 나는 등, 여기에 몇 가지 필드를 추가 할 Text::MicroTemplate를 사용 형태 : 필드를 사용하여 추가텍스트 :: MicroTemplate 및 서버 측 유효성 검사 [펄]

사용자 이름 성 이메일 <form> 태그 안에있는 루프는 정규식을 사용하여 유효성을 검사합니다 (템플릿의 매개 변수로 전송되고 태그의 HTML에서 "hidden"으로 styledisplay:none). 이제까지 모두 괜찮습니다.

갑자기 데이터를 서버 측에서 검증해야하는 다른 필드를 추가해야합니다. 그렇게하는 것이 가장 좋은 방법은 무엇입니까? (물론, POST 데이터를 검사 할 수 있으며, 틀린 경우 관련 오류 메시지가있는 양식을 다시 보낼 수는 있지만 전체 페이지를 다시 렌더링해야합니다. 다른 필드는 그렇지 않습니다. .)

아마 아약스가있는가요?

덕분에,

답변

1

AJAX 좋은 일 ™입니다 전체 페이지 렌더링을 피할 수 있습니다.

다른 브라우저 구현에서 작동하는 AJAX 코드를 작성하면 스파게티 자바 스크립트 코드가 생성된다는 것을 알고 있으므로 좋은 JavaScript 라이브러리와의 차이점을 설명하는 것이 좋습니다. 을 선택했습니다. CSS2 선택기를 알면 알기 쉽고 배우기 쉽기 때문입니다. 거기에 다른 좋은 라이브러리 유이, 프로토 타입, MooTools, 그냥 하나를 선택합니다. jQuery로

, 당신은이 간단한 버전을 포함하여 여러 가지 방법으로 AJAX 호출을 호출 할 수 있습니다 : 서버 측 리소스의 URL 입력

  • 유효성을 검사 :

    • URL

      $.post(url, parameters, callback, returned_type); 
      

      매개 변수 : 속성이 인코딩 된 매개 변수로 일련 화되는 개체

    • 콜백 : 요청 완료시 콜백이 호출됩니다 (응답 본문 및 상태가 첫 번째 및 두 번째 매개 변수로 콜백에 전달됨).
    • 유형 : 'html', 'text', 'xml', 'json' 같은 문자열, 즉 반응의 종류는 서버에서 기대하는 것을 말한다.

    일반적으로 양식을 보내려면 제출 단추에 이벤트 처리기를 연결해야합니다. 이벤트 처리기가 제출 이벤트를 납치하여 클라이언트 쪽 값의 유효성을 검사하고 AJAX 호출로 보낼 수 있습니다.

    $('#my_form').submit(function(event) { 
        // Prevent classic submission that ends with whole page render 
        event.preventDefault(); 
        // Here iterate through form elements and do a client-side check 
        ... 
        $ajax.post(...); 
    } 
    

    내 예 oversimplifed 것을 이해할 수 있지만, 패턴이 오히려 일반적이다 : 납치 제출 이벤트 - 앤 - 그것 - 다른 방향을. jQuery Cookbook의 11 장 (강력한 jQuery 플러그인이있는 플러그인 포함)에서 플러그인이 포함 된 Html 양식 개선이라는 추가 예제를 찾을 수 있습니다.

  • 관련 문제