jquery ajax 화면 동적 전환, 깜빡임 없이 페이지 이동

2019.07.11 10:39language/jquery

jquery ajax 를 활용하여 화면을 동적으로 깜빡임 없이 이동하는 방법이다.

 

포스팅에 앞서 jquery load 를 활용하여 동적 전환 하는 방법은 아래 링크를 참고하면 된다.

 

Jquery load 동적 전환

 

jquery load 화면 동적 전환, 깜빡임 없이 페이지 이동

jquery load 화면 동적 전환, 깜빡임 없이 페이지 이동 이번 포스팅은 jquery 를 활용하여 화면이 깜빡이지 않고 전환되는 방법이다. 보통의 페이지에서 이동을 하게되면 전체 페이지를 새로 불러옴으로 인하여 화..

cofs.tistory.com

ajax의 dataType 이라는 옵션을 활용하면 화면을 동적으로 바꿔줄 수 있다.

 

dataType 은 서버에서 반환될 때의 데이터 형식을 지정하는 옵션이다.

 

xml, html, script, json, jsnop, text 가 있으며 생략할 경우에는 자동으로 결정된다.

 

화면을 동적으로 바꾸기 위해서는 html 로 지정해야 한다.

 

html layout

 

html

1
2
3
4
5
6
7
8
9
10
11
<html>
    <body>
        <div id="gnb"></div>
            
        <div id="lnb"></div>
            
        <div id="bodyContents"></div>
        
        <input type="button" value="페이지 이동" onclick="acyncMovePage('/test/test.do')">
    </body>
</html>
cs

위와 같은 html 파일이 있고 우리는 bodyContexts div 태그 영역을 교체해 주어야 한다.

9# : 버튼 클릭 시 acyncMovePage() 함수가 실행된다.

javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<script>
 
    function acyncMovePage(url){
        // ajax option
        var ajaxOption = {
                url : url,
                async : true,
                type : "POST",
                dataType : "html",
                cache : false
        };
        
        $.ajax(ajaxOption).done(function(data){
            // Contents 영역 삭제
            $('#bodyContents').children().remove();
            // Contents 영역 교체
            $('#bodyContents').html(data);
        });
    }
 
</script>
cs

5# : ajax 옵션 중 dataType는 html로 해야 한다.

13# : ajax 통신을 실행 후 끝나면 done 이벤트가 발생하고 그 내부에서 넘겨받은 data 즉 페이지를 교체하고자 하는 영역 bodyContexts div 에 넣어주면 된다.

 

위 소스를 활용하면 화면을 깜빡이지 않고도 페이지 전환을 할 수 있게 된다.