ajax
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ex07_ajax_json.html</title>
<style>
td {
border: 1px solid gray;
}
</style>
<script src="../js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$.ajax({
url:"item.json",
dataType:"json",
success:function(data){ // 성공했을때 테이블 가져옴
$('#treeData').append("<tr>" +
"<td>id</td>" +
"<td>name</td>" +
"<td>price</td>" +
"<td>description</td>" +
"</tr>");
$.each(data, function(){
$('#treeData').append("<tr>" +
"<td>"+this.id +"</td>" +
"<td>"+this.name+"</td>" +
"<td>"+this.price+"</td>" +
"<td>"+this.description +"</td>" +
"</tr>");
})//each
}
})
})
</script>
</head>
<body>
<h3>과일의 특성 조사 자료</h3>
<table id="treeData"></table>
</body>
</html>
getJSON
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ex06_getJSON.html</title>
<style>
td {
border: 1px solid gray;
}
</style>
<script src="../js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
/* json을 테이블로 가져오기 */
/* function(data)data < - 변수 아무거나 작성 */
$(function(){
$.getJSON("item.json", function(data){
//alert(data)
$('#treeData').append("<tr>" +
"<td>id</td>" +
"<td>name</td>" +
"<td>price</td>" +
"<td>description</td>" +
"</tr>");
// 변수는 따옴표 X
$(data).each(function(){
$('#treeData').append("<tr>" +
"<td>"+this.id +"</td>" +
"<td>"+this.name+"</td>" +
"<td>"+this.price+"</td>" +
"<td>"+this.description +"</td>" +
"</tr>");
})// each
})//getJSON
})//ready
</script>
</head>
<body>
<h3>과일의 특성 조사 자료</h3>
<h6></h6>
<table id="treeData">
</table>
</body>
</html>
get
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ex09_get.html</title>
<style>
td {
border: 1px solid gray;
}
</style>
<script src="../js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$.get("item.xml", function(data){
//alert(data);
$('#treeData').append("<tr>" +
"<td>id</td>" +
"<td>name</td>" +
"<td>price</td>" +
"<td>description</td>" +
"</tr>");
// attr : 속성접근
// price는 item의 자손이므로 find로 price의 text불러오기
$(data).find('item').each(function(){
$('#treeData').append('<tr>'+
'<td>'+ $(this).attr("id") +'</td>'+
'<td>'+ $(this).attr("name")+'</td>'+
'<td>'+ $(this).find("price").text()+'</td>'+
'<td>'+ $(this).find("description").text()+'</td>'
+'</tr>')
})//each
})//get
})
</script>
</head>
<body>
<table id="treeData"></table>
</body>
</html>
<!--
XML 형태 // 가장 많으 사용하는건 ajax
<item id="1" name="레몬">
<price>3000</price>
<description> 레몬에 포함되어 있는 쿠엔산은 피로회복에 좋다. 비타민C도 풍부하다. </description>
</item>
-->
'기초 및 언어 > ▶ JavaScript&JQuery' 카테고리의 다른 글
| 12. JQuery _ ajax 예제 (0) | 2025.09.09 |
|---|---|
| 11. JQuery _ .magify(); 확대 (0) | 2025.09.09 |
| 10. Jquery_ .animate()를 활용한 이미지 슬라이드 (0) | 2025.09.09 |
| 09. jQuery_ .show() 와 .hide() 사용 (1) | 2025.09.09 |
| 08. jQuery_change() (1) | 2025.09.09 |