jQuery|JAVASCRIPT jQuery로 Ajax 폼 전송하기 (submit 이벤트 가로채기)
페이지 정보
조회 2,609회
작성일 20-04-29 09:35
jQuery의 submit 이벤트를 가로채 페이지 새로고침 없이 Ajax로 폼을 전송하는 방법이다. event.preventDefault()로 기본 전송을 막고, 서버에 Ajax 사용을 알리는 hidden 필드를 설정한 뒤 폼의 action URL과 serialize() 데이터를 준비한다. 이후 $.get으로 데이터를 보내고 응답받은 HTML 조각을 body에 추가하는 전체 코드를 담고 있다.
//form요소를 찾아서 그의 submit 이벤트를 가로챈다.
$('form').submit(function (event) {
//ajax를 사용하여 폼을 전송시키고자 한다(페이지의 새로고침을 막는다)
event.preventDefault();
//필요하다면, 유효성 검사 코드를 이부분에 추가하도록 한다.
// .....
//이는 ajax 가 사용되었음을 서버측에 알리는 용도이다.
$('input[name='usingAJAX']', this).val('true');
//폼에대한 참조를 저장한다.
var $this = $(this);
//폼요소의 url을 가로챈다.
var url = $this.attr('action');
//전송시킬 폼 데이터를 준비한다.
var dataToSend = $this.serialize();
// 서버측처리이후에 실행되어야 할 콜백함수
var collback = function (dataReseived) {
//폼을 숨긴다(폼에대한 참조를 $this에 저장해 놓았기에 가능)
$this.hide();
//서버로부터 다음과 같은 HTML 조각을 반환 맏을 것이기에 DOM에 이 HTML 조각이 추가된다.
//<div id='result'>Your favorite food is pizza!
// Thanks for telling us!</div>
$('body').append(dataReseived);
};
//수신되는 데이터의 형식(이번예제에서는 html 코드가 수신될 것이라 기대한다)
var tyhpeOfDataToReceive = 'html';
//폼을 전송한 후 데이터의 수신을 기다린다.
$.get(url, dataToSend, collback, tyhpeOfDataToReceive);
});//.submit() 을 닫는다.