[JQuery] Form을 통해 ajax로그인 구현하기

별로 어렵지도 않은 내용이지만

늘 그렇듯 검색해봤자 별볼일없는 결과만 나오기에

직접 실험해보고 글을 쓴다.

내가 구현하고자 한 것은

form이 실행될 경우, 새로고침이 되는게 아니라 비동기식으로 그 페이지에서 결과를 가져오는 것이다.

일단 Form데이터로 로그인을 구현하는 것 자체는 이미 다 알려진지 오래이고,

최근들어서 ajax로 로그인을 구현하는 방식이 자주 쓰이기는 한다.

<form id="form1">
    <div id="bx1">
    <input type="text"id="id1">
    <input type="password"id="pw1">
    </div>
    <button id="logbtn1">로그인</button>
</form>

일단 폼을 만들어 놓은 뒤에

$('#form1').submit(
     function()
    {
            ajax_login();
    }
);
 
function ajax_login(){
}

폼의 submit을 코드에서 조작하면 된다.

저 submit함수가 좋은 것은

이렇게 링크로 이동하는 것만이 아닌, 함수를 실행시키게 할수도 있다는 점이다.

하지만 아쉽게도, 저것만으로는 ajax와의 호환은 불가하다.

실행해보면 알 수 있듯이, 어떤 함수가 오든 새로고침을 해버리기 때문이다.

ajax로 데이터를 비동기로 보내봤자, 데이터가 갔는지 가지 않았는지 판단하기도 전에 새로고침을 해버리니 의미가 없다.

$('#form1').submit(function(event)
{
    event.preventDefault();
    ajax_login();
});

하지만 위의 preventDefault() 함수를 사용한다면, form의 자동 새로고침을 막아준다.

그 페이지에서 form을 통해 모든것을 할 수 있는 것이다.

이 실험은 굳이 로그인이 아니더라도, 모든 form에 대한 실무에 사용할 수 있을 것이다.