LogicalMaster
jQuery - 동적 페이지 이동 구현하기 본문
동적 페이지 새로고침 구현하기 - lomea.tistory.com/80
jQuery - 동적 페이지 새로고침 구현하기
안녕하세요. 이번에는 제이쿼리를 이용한 동적 페이지 새로고침을 구현 해 보도록 하겠습니다. 먼저 xampp 와 같은 서버 프로그램을 설치합니다. jQuery load 는 CORS 정책에 의거, 파일에서 구동할 수
lomea.tistory.com
안녕하세요.
이번에는 동적 페이지 이동 기능을 구현 해 봅시다.
먼저 xampp 프로그램을 설치해야 합니다.
www.apachefriends.org/index.html
XAMPP Installers and Downloads for Apache Friends
What is XAMPP? XAMPP is the most popular PHP development environment XAMPP is a completely free, easy to install Apache distribution containing MariaDB, PHP, and Perl. The XAMPP open source package has been set up to be incredibly easy to install and to us
www.apachefriends.org
위 페이지에서 다운로드가 가능합니다.
xampp 를 설치하였으면 바로 시작합시다.
이번 강좌에서는 링크를 누르면 새로고침 없이 페이지가 이동되도록
구현 할 것입니다.
- 완성본
- 소스
<html lang="ko"> <!-- HTML 선언문 -->
<head> <!-- HTML 헤더, 자바스크립트나 CSS 이 들어간다. -->
<meta charset="utf-8"/> <!-- HTML을 utf-8 인코딩으로 지정 -->
<script language="javascript" src="../js/jquery.js"></script> <!-- 제이쿼리 스크립트 불러오기 -->
<script>
function pagego(url) { // 페이지 로드 함수
$.ajax ({ // ajax 는 데이터를 전송/수신 시에 사용됩니다. ajax 를 이용하여 페이지를 불러올 것입니다.
url : url, // 대상 URL 지정
success : function() { // 페이지를 불러오는 데에 성공했다면
$("#container").load(url); // 해당 페이지를 #container 영역에 불러오기
},
error : function(err) { // 페이지를 불러오는 데에 실패했다면 에러 출력
alert("Server Error\n\n" + err); // 에러 출력
}
});
}
</script>
</head>
<body>
<h2>Hello World!</h2>
<!-- 버튼을 클릭하면 입력한 페이지로 이동합니다. -->
<button onclick="pagego('menuarea.html')">메뉴</button>
<button onclick="pagego('login.html')">로그인</button>
<button onclick="pagego('signup.html')">회원가입</button>
<!-- 끝 -->
<div id="container"> <!-- container -->
</div>
</body>
</html>
- 실행영상
페이지가 없으면, alert 창을 통해 오류를 출력했었는데,
페이지가 없으면 하단의 #container 쪽에 오류를 출력 해 보도록 하겠습니다.
- 소스
<html lang="ko"> <!-- HTML 선언문 -->
<head> <!-- HTML 헤더, 자바스크립트나 CSS 이 들어간다. -->
<meta charset="utf-8"/> <!-- HTML을 utf-8 인코딩으로 지정 -->
<script language="javascript" src="../js/jquery.js"></script> <!-- 제이쿼리 스크립트 불러오기 -->
<script>
function pagego(url) { // 페이지 로드 함수
$.ajax ({ // ajax 는 데이터를 전송/수신 시에 사용됩니다. ajax 를 이용하여 페이지를 불러올 것입니다.
url : url, // 대상 URL 지정
success : function() { // 페이지를 불러오는 데에 성공했다면
$("#container").load(url); // 해당 페이지를 #container 영역에 불러오기
},
error : function(err) { // 페이지를 불러오는 데에 실패했다면 에러 출력
$("#container").html("<h3>404 Not Found!</h3>"); // 에러를 #container 에 출력
}
});
}
</script>
</head>
<body>
<h2>Hello World!</h2>
<!-- 버튼을 클릭하면 입력한 페이지로 이동합니다. -->
<button onclick="pagego('menuarea.html')">메뉴</button>
<button onclick="pagego('login.html')">로그인</button>
<button onclick="pagego('signup.html')">회원가입</button>
<button onclick="pagego('unknown.html')">아무거나 클릭..</button>
<!-- 끝 -->
<div id="container"> <!-- container -->
</div>
</body>
</html>
- 실행화면
여기까지입니다.
전체 소스를 첨부합니다.
감사합니다.
'IT > 개발일기' 카테고리의 다른 글
| jQuery - Method / .hide() - 선택한 요소를 사라지게 하는 메서드 (0) | 2020.10.17 |
|---|---|
| jQuery - 맨 위로 부드럽게 이동하는 링크 만들기 (0) | 2020.10.17 |
| jQuery - 동적 페이지 새로고침 구현하기 (0) | 2020.10.02 |
| CSS 기초 - Floating, Positioning - Part 6 (0) | 2020.09.25 |
| CSS 기초 - CSS3 멀티라인 말줄임 처리 및 폴백 - Part 5 (0) | 2020.09.15 |
