그러냐

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

jquery

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

관절분리 2019. 11. 6. 16:42
반응형

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

 

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

 

Jquery load 동적 전환

 

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>

Colored by Color Scripter

 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>

Colored by Color Scripter

 cs

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

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

 

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



출처: https://cofs.tistory.com/402?category=627150 [CofS]

반응형

'jquery' 카테고리의 다른 글

jquery class 변경 추가 삭제  (0) 2020.08.13
자바스크립트 - append, prepend, after, before - 추가  (0) 2019.11.06
제이쿼리 ajax 더보기 버튼 구현  (0) 2019.10.22
[jquery] inArray 숫자 비교시 작동되지 않을 시  (0) 2019.08.14
chart.js - Y 축의 최대 값과 최소값 설정 포함 예제  (0) 2019.01.24
'jquery' Related Articles more