jquery를 이용한 Ajax html데이터 일부분 로드

jjquery를 이용한 Ajax html일부분 로드하기

Ajax 데이터로드하기 html편에서 이미 html 전체를 로드하는 방법을 봤다. 이번에는 일부분을 로드하는 방법을 살펴보자

html데이타 파일

데이타 파일 안에 두가지로 분류해놓자 클래스명을 하나는 part 또다른 하나는part02 로 정해주었다.

Part one
어쩌고 저쩌고


Part tow
이러히 저러히

메인페이지

jquery를 이용한 ajax 데이터로드 html일부분


 
html 일부분_01
 
html 일부분_02



로드된 데이터가 들어올자리

리스트에 두가지로 나누었다 하나는 아이디 one을 주었고 하나는 아이디 tow를 주었다. 이제 각각클릭시 part, part02를 부르도록 스크립트를 짜보자

jquery 스크립트

 $(document).ready(function() {
   $('#one a').click(function() {
     $('#content').load('exam.html .part');
     return false;
   });   
   $('#tow a').click(function() {
     $('#content').load('exam.html .part02');
     return false;
   });     
 });

위에서 보면 이제까지와 다른점은 .load(exam.html .part');이부분이다. .load 후에 상세히 부를 클래스가 있다. 따라서 아이드 one을 가진 a엘리먼트를 클릭시 exam.html 문서의 part클래스를 부르게된다.

마지막으로 결과물을 보려면 아래로

http://sianasiatiger.cafe24.com/study/A_ajax_08.html