ajax 로딩시 새로고침 문제

가끔은 실무 개발중에 일어날수있는 문제들도 다뤄보고자 한다

form 태그를 사용하면서 ajax 도 태울시에 페이지가 새로고침 하는문제가 종종발생한다

var paramJson = {id : $("#_id").val(), pw : $("#_pw").val()};
 
$.ajax({
    type : 'POST', // Http Request Method로 POST로 지정
    url : "login.do", // 서버 요청 주소
    contentType : 'application/json;charset=UTF-8', // 서버 요청시 전송할 데이터가 UTF-8 형식의 JSON 객체임을 명시
    data : JSON.stringify(paramJson), // JavaScript 객체를 JSON 객체로 변환하여 서버 요청시 전송
    dataType : 'json', // 서버로부터 응답받을 데이터가 JSON 객체임을 명시하여 수작업 없이 응답 데이터를 JavaScript 객체로 획득
    success : function(res){alert(res.result);}, //callBackFunc(response)
    error : function(request, status, error){
        alert(error);
    }
});    

이런식으로 ajax를 태우는데 

form 태그 내부의 버튼을 눌러서 발생되는 이벤트면 form 태그의 action을 타게되는것이다

해결방법은 이러하다

-방법1

<form name="data_form" method="post" action="./">
 
<!-- 클릭시 form(data_form)의 submit 동작을 하게 됨 -->
<button id="btn_example1">버튼 예제1</button>
 
<!-- 클릭시 submit 동작하지 않고 아무 반응 없음 -->
<button type="button" id="btn_example2">버튼 예제2</button>
 
</form>
<!--출처 : http://blog.freezner.com/archives/807 -->

버튼에 type="button" 을 주면 action을 타지않게된다 

-방법2

$('#form_submit').click(function(){
   $.ajax({
        type: 'post',
        url: 'process.php',
        success: function(data){
            alert(data);
        }
   });
    return false; //<- 이 문장으로 새로고침(reload)이 방지됨
});
 
//출처: http://somoly.tistory.com/103 [somoly.tistory.com]

버튼이벤트에서 새로고침을 막는 방법도있다

방법은 여러가지지만 사용시에는 한가지로 통일시켜야 가독성이 좋고 어떤방식인지 헷갈리지않으니

주의하도록 한다