[Javascript] ajax를 이용한 화면 refresh 없이 링크이동
:D Javascript 설정
var menuClick = function(url){ if(url == '/'){ location.reload(true); return; }
$.ajax({ type: 'POST', url: url, async:false, data: "", contentType:"application/x-www-form-urlencoded; charset=UTF-8", success: function(data) { $('#Container').html(data);
if(isMenuHide) menuOff(); }, error: function(request, status, error) { alert(error); } }); }; |
:D main 페이지 설정
<html> <head></head> <body> <div id="wrapper"> <div id="left"> <a href="javascript:menuClick('/a.jsp');">a link</a><br/> <a href="javascript:menuClick('/b.jsp');">b link</a> </div> <div id="Content"> /* 화면전환 부분 "/ </div> </div> </body> </html> |
:D 링크 페이지 설정
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!-- Content Start --> /* Content에 들어갈 내용 */ <!-- Content End --> |
:D 장점
- 화면 전환 없이 페이지를 보여줄 수 있다.(깜빡임이 없다.)
:D 단점
- URL이 동일 함으로 refresh 되면 home으로 이동된다.
- back키를 눌렀을 때 해당 site를 나가버린다.(이전 site 화면 보여줌)
'skill > HTML.Javscript.CSS' 카테고리의 다른 글
| html 인트로화면 넣기(동일화면) : javascript (0) | 2015.06.13 |
|---|---|
| table cellpadding cellspacing css로 처리하는 법 (0) | 2015.04.10 |
| [CSS] sitemap 아이콘 디자인 (0) | 2014.08.20 |
| [CSS] 메뉴 슬라이드 이동 (0) | 2014.08.20 |
| [javascript] 화면크기 변경 시 이벤트 설정 (0) | 2014.08.13 |