2019. 7. 11. 10:39ㆍlanguage/jquery
jquery ajax 를 활용하여 화면을 동적으로 깜빡임 없이 이동하는 방법이다.
포스팅에 앞서 jquery load 를 활용하여 동적 전환 하는 방법은 아래 링크를 참고하면 된다.
jquery load 화면 동적 전환, 깜빡임 없이 페이지 이동
jquery load 화면 동적 전환, 깜빡임 없이 페이지 이동 이번 포스팅은 jquery 를 활용하여 화면이 깜빡이지 않고 전환되는 방법이다. 보통의 페이지에서 이동을 하게되면 전체 페이지를 새로 불러옴으로 인하여 화..
cofs.tistory.com
ajax의 dataType 이라는 옵션을 활용하면 화면을 동적으로 바꿔줄 수 있다.
dataType 은 서버에서 반환될 때의 데이터 형식을 지정하는 옵션이다.
xml, html, script, json, jsnop, text 가 있으며 생략할 경우에는 자동으로 결정된다.
화면을 동적으로 바꾸기 위해서는 html 로 지정해야 한다.
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 에 넣어주면 된다.
위 소스를 활용하면 화면을 깜빡이지 않고도 페이지 전환을 할 수 있게 된다.
'language > jquery' 카테고리의 다른 글
| jquery ajax 옵션 총정리 (0) | 2019.07.19 |
|---|---|
| jquery ajax 비동기 페이지 이동 시 뒤로가기 (0) | 2019.07.11 |
| jquery FormData를 Json으로 변환 (0) | 2019.07.11 |
| jquery load 화면 동적 전환, 깜빡임 없이 페이지 이동 (0) | 2019.07.03 |
| jquery modal 새로고침, 동적 호출, 멀티 호출 (0) | 2018.10.23 |
| jquery 드래그 앤 드롭 파일 업로드 (28) | 2018.04.25 |
| onbeforeunload 를 활용하여 페이지 이동 시 프로그레스바, 로딩바 생성 (0) | 2017.06.02 |
| browser.msie 정의되지 않음 또는 null 참조인 'msie' 속성을 가져올 수 없습니다. (0) | 2016.12.15 |
| jquery javascript 문바열 바이트 체크 / 영문 한글 특수문자 등 / length / maxlength (0) | 2016.12.06 |
| page swiper plugin 추천 / 페이지 슬라이드 / 이미지 슬라이드 / 탭 슬라이드 / jquery mobile 호환 (0) | 2016.07.08 |