작성일 : 11-12-01 15:29
|
[JQuery] (JQuery Source) load , getJSON , getScript , get , ajax
|
 |
|
글쓴이 :
조형래
 조회 : 4,401
|
[동시 작동은 안될듯, 그냥 복사했음]
01.HtmlSamplePage.htm
<div>
<h3>샘플 페이지</h3>
<div>
샘플 페이지입니다.
</div>
</div>
-------------------------------------
<title>동적으로 원격 페이지 로드</title>
<script src="../js/jquery-1.3.2-vsdoc2.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#btn .btnLoad").click(function() {
$('#ctlGrid').load("01.HtmlSamplePage.htm"); // 비동기적으로 페이지로드
window.alert("이 메시지는 먼저 출력됨. Why? 비동기."); // 메시지박스가 먼저 출력 가능
});
});
</script>
<div id="btn"><div class="btnLoad">HTML읽어오기 버튼</div></div>
<div id="ctlGrid"></div>
------------------------------------
<title>비동기적으로 JSON파일 로드</title>
<script type="text/javascript">
$(document).ready(function () {
$("#btn .btnLoad").click(function () {
$.getJSON("02.jQuery.getJSON.js", function (data) {
$('#pnlDisplay').empty(); // 패널(div)의 내용 초기화
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>";
$('#pnlDisplay').append(table); // 패널에 추가하기
});
});
});
</script>
<div id="btn"><div class="btnLoad">HTML읽어오기</div></div>
<div id="pnlDisplay"></div>
---------------------------------------
<title>하나의 완성된 자바스크립트 파일을 동적 로드/실행</title>
<script type="text/javascript">
$(document).ready(function () {
$("#btn").click(function () {
// 아래 코드가 실행되는 시점에 js 파일의 기능 실행됨
$.getScript('03.jQuery.getScript.js');
});
});
</script>
<input type="button" id="btn" value="표그리기" />
<div id="ctlGrid"></div>
-------------------------------------
<title>XML파일 로드하기</title>
<script type="text/javascript">
$(document).ready(function () {
$("#btn").click(function () {
$.get('04.Company.xml', function (data) {
$('#ctlGrid').empty();
$(data).find('Company').each(function () {
var $entry = $(this); // 현재 시점의 레코드셋
// 특성(Attribute)을 읽어오기
var html = "<div>" + $entry.attr('CompanyType') + "</div>"; // Private
// 하위 엘리먼트 읽어오기
html += "<div>" + $entry.find("CompanyName").text() + "</div>"; // 닷넷코리아
$('#ctlGrid').append($(html));
});
});
});
});
</script>
<input type="button" id="btn" value="회사소개" />
<div id="ctlGrid"></div>
----------------------------------
<title>get 방식으로 서버에 데이터 전송 및 받기</title>
<script type="text/javascript">
$(document).ready(function () {
$('#btn').click(function () {
$.get(
"05.FrmResponseData.aspx", //[1] 서버측 스크립트 언어 : ASP.NET, JSP, PHP
{'Msg': $(this).val() }, //[2] 쿼리스트링 : ?키1=값1&키2=값2
function (data) { //[3] 콜백함수 : 결과값 받기, data로 받아옴
$('#pnlDisplay').html(data);
}
); // end $.get()
});
});
</script>
<input type="button" id="btn" value="서버로부터 HTML 가져오기" />
<div id="pnlDisplay">여기에 출력</div>
----------------------------------
<title>post 방식으로 서버에 데이터 전송 및 받기</title>
<script type="text/javascript">
$(document).ready(function () {
$('#btn').click(function () {
$.post("05.FrmResponseData.aspx", { 'Msg': 'Post방식으로전송' }, function (data) {
$('#pnlDisplay').html(data);
});
});
});
</script>
<input type="button" id="btn" value="서버로부터 HTML 가져오기" />
<div id="pnlDisplay">여기에 출력</div>
----------------------------------
<title>load 메서드로 서버에 데이터 전송 및 받기</title>
<script type="text/javascript">
$(document).ready(function () {
$('#btn').click(function () {
$('#pnlDisplay').load("05.FrmResponseData.aspx", { 'Msg': $(this).val() });
});
});
</script>
<input type="button" id="btn" value="서버로부터 HTML 가져오기" />
<div id="pnlDisplay">여기에 출력</div>
---------------------------------
<title>폼에 있는 값을 서버로 전송하기</title>
<script type="text/javascript">
$(document).ready(function () {
$('#btn').click(function () {
$('#pnlDisplay').load("05.FrmResponseData.aspx", { 'Msg': $('#msg').val() });
});
});
</script>
<div id="frmSend">
<form action="05.FrmResponseData.aspx">
<input type="text" name="msg" value="" id="msg" />
<input type="submit" value="전송" />
</form>
</div>
<hr />
<input type="button" id="btn" value="Ajax방식" />
<div id="pnlDisplay">여기에 출력</div>
---------------------------------
<title>getScript()메서드의 기능을 ajax()메서드로 대체</title>
<script type="text/javascript">
$(document).ready(function () {
$.ajax({
type: "get",
url: "10.jQuery.ajax.js",
dataType: "script",
success: function (data) { MessageBox('안녕'); },
error: function (data) { alert('에러 발생'); }
});
});
</script>
-----------------------------------
<title>getJSON()을 대체하는 ajax() 메서드</title>
<script type="text/javascript">
$(document).ready(function () {
// 동적으로 원격에 있는 JSON 파일(결과값)을 로드
$.ajax({
url: "02.jQuery.getJSON.js", // a.aspx, a.php, a.jsp
dataType: "json",
success: function (data) {
// 받아온 JSON을 테이블에 출력
$.each(data, function () {
$('#tblList').append("<tr><td>" + this.Num + "</td><td>"
+ this["Name"] + "</td></tr>");
});
$.each(data, function (index, entry) {
$('#tblList').append("<tr><td>" + entry.Num + "</td><td>"
+ entry["Name"] + "</td></tr>");
});
},
error: function () { alert("에러발생"); }
});
});
</script>
<table id="tblList" border="1"></table>
------------------------------
<title>반복사용하는 ajax() 메서드의 주요 속성을 ajaxSetup()에서 설정</title>
<style type="text/css">
.yellow { background-color:Yellow; }
.Lime { background-color:Lime; }
</style>
<script type="text/javascript">
$(document).ready(function () {
// $.ajax()에서 반복 사용하는 속성을 상단에 설정 후 $.ajax에서 상속받아 사용
$.ajaxSetup({
url: "02.jQuery.getJSON.js",
dataType: "json"
});
$.ajax({
success: function (data) {
$.each(data, function () {
$('#tblList').append("<tr><td>" + this.Num + "</td><td>"
+ this["Name"] + "</td></tr>");
});
$('table:first tr:odd').addClass('yellow');
$('table:first tr:even').addClass('Lime');
}
});
$.ajax({
success: function (data) {
$.each(data, function () {
$('#tblList2').append("<tr><td>" + this.Num + "</td><td>"
+ this["Name"] + "</td></tr>");
});
$('table:last tr:odd').addClass('yellow');
$('table:last tr:even').addClass('Lime');
}
});
});
</script>
<table id="tblList" border="1"></table>
<table id="tblList2" border="1"></table>
|
|
875
