Dev/jQuery
[jQuery] 요청한 데이터 로드(load, html, getJSON, getScript, get, post)하기
쇼크리더
2009. 12. 17. 16:37
반응형
로드하는 방법도 여러가지..
load : load(String url, params, Function callback)
html : html(value)
load 는 직접 url을 호출하여 요소에 추가 시킬 수 있고 요청방식은 POST로 이루어 진다.
html은 만들어진 내용을 요소에 추가시킨다.
파일 호출은 getJSON, getScript, get, post 중 맞는 것 적용하면 됨.
※ 테스트하면서 하나 알게 된건 페이지 호출시 get 방식이면 갱신이 안되는 반면, post 방식으로 하면 갱신이 된다는 점.
아래는 테스트했던 소스들.. 서비스로 폼전송하는것과 처리중임 표시(.ajaxStart, .ajaxStop)하는 소스도 포함 ㅋ
<!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>
<link href="Css/cssJMBae.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.button
{
border-width: 1px; padding: 1px; margin: 1px; border-style: solid; text-align: center; width: 150px;
}
#loading
{
display: none;
}
</style>
<!--<script src="Scripts/jquery-1.3.2-vsdoc.js" type="text/javascript"></script>-->
<script src="Scripts/jquery-1.3.2.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function () {
$('#letter-a .button').click(function () {
$('#dictionary').load('Page106Part1.htm');
$('#dictionary')
alert('Loaded!');
});
$('#letter-b .button').click(function () {
$.getJSON('Page106.json', function (data) {
$('#dictionary').empty(); //id dictionary 의 내용삭제
$.each(data, function (entryIndex, entry) {
var html = '<div class="entry">';
html += '<h3 class="term">' + entry['term'] + '</h3>';
html += '<div class="part">' + entry['part'] + '</div>';
html += '<div class="definition">';
html += entry['definition'];
if (entry['quote']) {
html += '<div class="quote">';
$.each(entry['quote'], function (lineIndex, line) {
html += '<div class="quote-line">' + line + '</div>';
});
if (entry['author']) {
html += '<div class="quote-author">' + entry['author'] + '</div>';
};
html += '</div>';
}
html += '</div>';
html += '</div>';
$('#dictionary').append(html);
});
}); ;
});
$('#letter-c .button').click(function () {
$.getScript('Page106.js');
});
$('#letter-d .button').click(function () {
$.get('http://www.microsoft.com/korea/msdn/rss/homepage/msdn.xml', function (data) {
$('#dictionary').empty();
$(data).find('item').each(function () {
var $item = $(this);
var html = '<div class="item">';
html += '<h3 class="title">' + $item.find('title').text() + '</h3>';
html += '<div class="description">' + $item.find('description').text() + '</div>';
html += '<div class="link">' + $item.find('link').text() + '</div>';
html += '<div class="pubDate">' + $item.find('pubDate').text() + '</div>';
html += '<hr>';
html += '</div>';
$('#dictionary').append(html);
});
});
});
// $('#letter-d .button').click(function () {
// $.get('Page106.xml', function (data) {
// $('#dictionary').empty();
// $(data).find('entry').each(function () {
// var $entry = $(this);
// var html = '<div class="entry">';
// html += '<h3 class="term">' + $entry.attr('term') + '</h3>';
// html += '<h3 class="part">' + $entry.attr('part') + '</h3>';
// html += '<div class="definition">' + $entry.find('definition').text() + '</div>';
// html += '</div>';
// $('#dictionary').append(html);
// });
// });
$('#letter-e a').click(function () {
$('#dictionary').empty();
$.get('Page106Response.aspx', { 'msg': $(this).text() }, function (data) {
$('#dictionary').html(data);
});
return false;
});
$('#letter-post a').click(function () {
$('#dictionary').empty();
// $.post('Page106Response.aspx', { 'msg': $(this).text() }, function (data) {
// $('#dictionary').html(data);
// });
$('#dictionary').load('Page106Response.aspx', { 'msg': $(this).text() });
return false;
});
// $('#letter-f form').submit(function () {
// // $('#dictionary').load('Page106Response.aspx', { 'msg': $('input[@name="msg"]').val() });
// $('#dictionary').load('Page106Response.aspx', { 'msg': '뭐지증말' });
// $('#dictionary').append("<h3>되ㄴㄴㄴ</h3>");
// return false;
// });
$('#letter-f form').submit(function () {
$.post('Page106Response.aspx', $(this).find('input').serialize(), function (data) {
$('#dictionary').html(data);
});
return false;
});
});
$(document).ready(function () {
$('#loading').ajaxStart(function () {
$(this).show();
}).ajaxStop(function () {
$(this).hide();
// alert('ajaxStop!');
});
});
</script>
</head>
<body>
<h2>천사의 사전</h2>
<h4>앰브로스 비어스 지음</h4>
<div class="letters">
<div id="letter-a" class="letter">
<h3>A</h3>
<div class="button">
htm Load
</div>
</div>
<div id="letter-b" class="letter">
<h3>B</h3>
<div class="button">
json Load
</div>
</div>
<div id="letter-c" class="letter">
<h3>C</h3>
<div class="button">
js Load
</div>
</div>
<div id="letter-d" class="letter">
<h3>D</h3>
<div class="button">
xml Load
</div>
</div>
</div>
<div class="letter" id="letter-e">
<h3>E</h3>
<ul>
<li><a href="Page106Response.aspx?msg=한글깨져Get">한글깨져Get</a></li>
<li><a href="Page106Response.aspx?msg=한글깨져Get2">한글깨져Get2</a></li>
<li><a href="Page106Response.aspx?msg=한글깨져Get3">한글깨져Get3</a></li>
</ul>
</div>
<div class="letter" id="letter-post">
<h3>E</h3>
<ul>
<li><a href="Page106Response.aspx?msg=한글깨져Post">한글깨져Post</a></li>
<li><a href="Page106Response.aspx?msg=한글깨져Post2">한글깨져Post2</a></li>
<li><a href="Page106Response.aspx?msg=한글깨져Post3">한글깨져Post3</a></li>
</ul>
</div>
<div class="letter" id="letter-f">
<form action="Page106Response.aspx">
<input type="text" name="msg" value="" id="msg" />
<input type="submit" name="search" value="search" id="search" />
<span id="loading">
Loading...
</span>
</form>
</div>
<div id="dictionary">
</div>
</body>
</html>
반응형