jQuery 플러그인 중 form태그 내부의 데이터를 편하게 비동기 처리해주는 기능이 있습니다.
바로 jQuery의 ajaxSubmit(); 인데요.
submit이지만 비동기로 처리할 수 있고 동작 이전의 함수처리, 이후의 함수처리도 정의할 수 있는 장점이 있습니다.
사용법은 아래와 같습니다.
사용방식
var options = {
target: '#output2', // target element(s) to be updated with server response
beforeSubmit: showRequest, // pre-submit callback
success: showResponse // post-submit callback
// other available options:
//url: url // override for form's 'action' attribute
//type: type // 'get' or 'post', override for form's 'method' attribute
//dataType: null // 'xml', 'script', or 'json' (expected server response type)
//clearForm: true // clear all form fields after successful submit
//resetForm: true // reset the form after successful submit
// $.ajax options can be used here too, for example:
//timeout: 3000
};
$(formTag).ajaxSubmit(options);
definition에서 name은 변수처럼 사용할 이름을 지정하고 template은 사용할 jsp를 지정합니다.
그 내부에는 따라오는 헤더, 사이드, 바닥 jsp들을 처리하고 마찬가지로 name은 사용할 이름 value에는 실제로 들어갈 jsp를 입력합니다.
먼저 생성해놓은 JSP 중 tiles-layout.jsp를 메인으로 사용하고 각각 header sidebar, footer부분을 영역별로 사용할 예정입니다.
아래서 extends부분은 위에서 선언한 jsp를 상속받아 실제로 사용하는 페이지에 이식하고 body영역은 실제 페이지를 사용하기 위해 설정하는 부분으로 메인 body로 쓸 jsp영역을 설정할 수 있으며, {1}/{2}.jsp을 통해 board/board.jsp로 갈때 자연스럽게 이식되어 사용할 수 있게 합니다.
구글차트는 단순하게 입력하는 데이터의 배열값이 바뀌면 알아서 바뀌어서 처음에 구현할때는 chart의 data부분값을 배열로 따로 처리하여 넣고 빼고를 하였는데, 추가되는 데이터가 애니메이션 효과처럼 추가되는걸 표현하고 싶었고, 구글 차트 중 animation파트를 확인하면서 관련 예제를 기준으로 테스트버전을 만들었습니다.