1. #("#id").load()함수
====실행페이지====
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;" charset="utf-8" >
<title> 요소만큼 반복해서 속성 설정 및 가져오기 </title>
<script src="http://code.jquery.com/jquery-1.7.2.js"></script>
<style type="text/css">
.red{color:red;}
</style>
<script>
$(document).ready(function (){
$("#btn .btnload").click(function(){
$('#ctlgrid').load("sample.html"); //비동기적으로 페이지로드
window.alert("이 메시지는 먼저 출력됨(비동기)");
});
});
</script>
</head>
<body>
<div id="btn">
<div class="btnload">html읽어오기 버튼</div>
</div>
<div id="ctlgrid">
</div>
</body>
</html>
====sample.html====
<div>
<h3>샘플 페이지</h3>
<div>샘플 페이지입니다</div>
</div>
2.JSON(JavaScript Object Notation)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;" charset="utf-8" >
<title> 요소만큼 반복해서 속성 설정 및 가져오기 </title>
<script src="http://code.jquery.com/jquery-1.7.2.js"></script>
<style type="text/css">
.red{color:red;}
</style>
<script>
$(document).ready(function (){
$("#btn .btnload").click(function(){
$.getJSON("getJSON.js", function(data){
$('#ctlgrid').empty();//패널 초기화
var table = "<table border='1'><tr><td>인덱스</td><td>번호</td><td>이름</td></tr>";
//data가 있는 만큼 each메서드를 사용해서 데이터 뿌림
$.each(data, function(index, entry){
table += '<tr>';
table += '<td>' + index + '</td>';
table += '<td>' + entry["Num"] + '</td>';
if(entry["Name"]){
table += '<td>' + entry["Name"] + '</td>';
}
table += '</tr>';
});
table += '</table>';
$('#ctlgrid').append(table); //패널에 추가하기
});
});
});
</script>
</head>
<body>
<div id="btn">
<div class="btnload">html읽어오기 버튼</div>
</div>
<div id="ctlgrid">
</div>
</body>
</html>
'강좌 > jQuery' 카테고리의 다른 글
제이쿼리(jQuery) - $.ajax() (0) | 2013.04.23 |
---|---|
jQuery Ajax - 서버와 데이터 통신 및 XML파일 읽기 (0) | 2013.04.23 |
제이쿼리(jQuery) - 트리구조 만들기 (0) | 2013.04.23 |
제이쿼리(jquery) - 애니메이션 효과 (0) | 2013.04.23 |
jQuery효과 관련 API (0) | 2013.04.23 |