[jQuery] load( ) 메소드를 이용한 외부 데이터의 페이지 반영[jQuery] load( ) 메소드를 이용한 외부 데이터의 페이지 반영
Posted at 2020. 3. 2. 19:03 | Posted in JavaScript & jQuery/jQuery■ 새로고침 없이변경된 데이터 조회하기
Ajax 통신을 사용한 비동기 통신으로
웹 브라우저의 새로고침 없이 데이터를 조회하거나, 변경 및 이벤트를 실행하는 경우는 많이 보아 왔을 것이다.
또한 iframe을 통해 작업되어져 있는 다른 페이지의 정보를 가져오는 방식으로도
새로고침 없이 작업을 진행 할 수 있지만.
여기서 설명할 .load( ) 메소드는 Ajax와 iframe은 비슷한 기능을 수행하면서도, 좀 하위 호한의 느낌이 강하지만.
사용여부와 방법에따라서 직관적이고 단순한 사용의 장점이 있다.
단순히 가져올 데이터가 명확하다면 .load( ) 메소드는 큰 힘을 발휘 하게 된다.
load_front.php |
<html> <head> <title>:: jQuery load() 함수 ::</title> <script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script type="text/javascript"> jQuery(document).ready(function() { backLoadAgainCall(); }); function backLoadAgainCall() { jQuery(".output").load("load_back.php"); } </script> </head> <body> <input type="button" onClick="backLoadAgainCall();" value="재호출"> <hr/> <div class="output"></div> </body> </html> |
load_back.php |
<html> <head> <title>:: jQuery load() 함수 ::</title> <style type="text/css"> #turnImg { transform:rotate(0deg); } /* #turnImg { transform:rotate(90deg); } */ /* #turnImg { transform:rotate(180deg); } */ /* #turnImg { transform:rotate(270deg); } */ </style> </head> <body> <img id="turnImg" src="joker.jpg"/> </body> </html> |
코드를 다 작성했다면.
load_front.php 를 실행한다.
이후 load_back.php에서 #turnImg { transform : rotate ( 0deg ); } 를
0 → 90 → 180 → 270 순서로 한번씩 변경하면서
브라우저의 재호출 버튼을 클릭해 보자.
load_front.php를 새로고침 하지 않고 load_back.php의 변경된 사항을 반영하여
이미지가 계속 회전하는 것을 확인 할 수 있다.
위와같이 jQuery의 .load( ) 를 사용하면
이미 만들어진 결과를 페이지의 새로고침 없이 가져올 수 있어.
경우의 따라서는 Ajax 호출과 구분하여 사용할 수 있다.
'JavaScript & jQuery > jQuery' 카테고리의 다른 글
| [jQuery] TextBox에서 다중 선택 기능 제작 (0) | 2020.07.24 |
|---|---|
| [jQuery] JCROP을 이용한 이미지 자르기 - Sample (5) | 2020.02.11 |
| [jQuery] jQuery Mobile을 이용한 반응형 테이블 제작 (0) | 2019.06.18 |
| [jQuery] 팝업 창 외에 다른 항목 클릭 막기 (0) | 2019.06.04 |
| [jQuery] 화면 단위로 끊어서 마우스 휠로 이동하기 (7) | 2019.01.31 |
