jQuery Ajax - jQuery.getScript() 메서드 (하나의 완성된 자바스크립트 파일을 동적 로드/실행)
.NET프로그래밍/jQuery 1.3.2 2009. 11. 13. 08:24 |
"새 항목 추가"로 "Html" 형식의 파일인 [jQuery.getScript.htm]과 "JScript" 형식의 파일인 [jQuery.getScript.js]를 만들고 각각 코드를 아래와 같이 작성한다.
[jQuery.getScript.htm]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>하나의 완성된 자바스크립트 파일을 동적 로드/실행</title>
<script src="../js/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>
-------------------------------------------------------------------------------------
[jQuery.getScript.js]
// JSON 데이터
var tableData = [
{ "Num": "1", "Name": "홍길동", "Title": "안녕" },
{ "Num": "2", "Name": "백두산", "Title": "방가" },
{ "Num": "3", "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에 있는 레이어
-------------------------------------------------------------------------------------
[실행결과]
--> 첫 화면. '표그리기'버튼을 누르기 전 화면.
--> '표그리기'버튼을 누른 후 화면.
'.NET프로그래밍 > jQuery 1.3.2' 카테고리의 다른 글
| jQuery Ajax - 서버측 데이터 출력 페이지 만들어서 실행 (0) | 2009.11.13 |
|---|---|
| jQuery Ajax - jQuery.get() 메서드 (XML파일 로드하기) (0) | 2009.11.13 |
| JSON(JavaScript Object Notation) - jQuery Ajax - jQuery.getJSON() 메서드 (비동기적으로 JSON파일 로드) (0) | 2009.11.13 |
| jQuery Ajax - jQuery.load() 메서드 (동적으로 원격 페이지 로드) (0) | 2009.11.13 |
| WaterMarkTextBox (워터마크 텍스트박스 컨트롤 구현) (0) | 2009.11.12 |