본문 바로가기

강좌/jQuery

jQuery Ajax관련 API 및 getJSON





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>