jQuery | javascript | CSS

58.jQuery - jQuery.getScript ( 09.Ajax )

Godffs 2009. 11. 13. 10:07
반응형
$.getScript : 동적으로 JavaScript 로드

03.jQuery.getScript.htm

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>하나의 완성된 자바스크립트 파일을 동적 로드/실행</title>

    <script src="../jQuery/jquery-1.3.2-vsdoc2.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(document).ready(function() {

            $('#btn').click(function() {

                //아래 코드가 실행되는 시점에 js 파일의 기능 실행됨

                $.getScript('03.jQuery.getScript.js');

            });

        });

    </script>

</head>

 

<body>

        <input type="button" id="btn" value="표그리기" />

        <div id="ctlGrid">

        </div>

</body>

</html>


03.jQuery.getScript.js  [ JScript.js파일 ]

//JSON 데이터

var tableData = [

    { "Num": "1", "Name": "홍길동", "Title": "안녕" },

    { "Num": "1", "Name": "백두산", "Title": "방가" },

    { "Num": "1", "Name": "임꺽정", "Title": "또봐" }

];//입력

 

    var htmls = '';

   

    htmls += "<table border='1'>"

    htmls += "<tr><th>번호</th><th>이름</th><th>제목</th></tr>";

    $.each(tableData, function() {

        htmls += "<tr>";

        htmls += "<td>" + this['Num'] + "</td>";

        htmls += "<td>" + this['Name'] + "</td>";

        htmls += "<td>" + this['Title'] + "</td>";

        htmls += "</tr>";

    }); //처리&디자인

 

    htmls += "</table>";

    $('#ctlGrid').html(htmls); //ctlGrid 포함될 HTML 있는 레이어

    //출력


결과화면

[그림58-1]



반응형