Notice
Recent Posts
Recent Comments
Link
«   2024/07   »
일 월 화 수 목 금 토
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31
Tags more
Archives
Today
Total
관리 메뉴

Developer Gonie

[8주차] 31. Ajax를 위한 메소드 중, Shorthand Method 예시[ get(), getJSON() ] 본문

K-DigitalTraining 강의/7. JQuery

[8주차] 31. Ajax를 위한 메소드 중, Shorthand Method 예시[ get(), getJSON() ]

이대곤 2022. 7. 17. 11:55

* Shorthand Method 에는 이거 말고도 여러가지가 존재하나 여기서는 딱 2가지만 다뤄보았음.

  바로 앞 게시글에서 얘기했듯이 Shorthand Method 보다는 Low-Level Interface에 위치한 ajax() 메소드를 사용하는걸 추천.

jQuery의 Ajax가 제공하는 Shorthand Method인 .get() 메소드 예시

* 이 예시에서는 xml을 요청해 보았음

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<script src="../js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">

	$(function(){
		
		$.get('item.xml', function(data){
			alert(data);
			
			//table 요소에 열 이름 추가	
			var str = "";
			str += "<tr>";
			str += "<td>id</td>";
			str += "<td>name</td>";
			str += "<td>price</td>";
			str += "<td>description</td>";
			str += "</tr>";
			$('table').append(str);
			
			//xml을 가져와 객체의 정보를 table 요소에 행으로 추가	
			$(data).find('item').each(function(){  //<items>의 모든 자손 중에서 <item> 인 모든 것
				
			$('table').append("<tr>"
					// attr() 메소드는 태그에 달려있는 속성의 값을 읽어올 때 사용
					+"<td>" + $(this).attr('id') + "</td>" 
					+"<td>" + $(this).attr('name') + "</td>"
					// find() 는 자손을 찾을 때 사용하며, 여기선 검색되는 요소가 1개라서 바로 text()함수를 사용할 수 있다. 이외의 경우 .each()를 이용할듯
					+"<td>" + $(this).find('price').text() + "</td>"   
					+"<td>" +  $(this).find('description').text() + "</td>"
					+"</tr>"
					);
			}); 
			
		});
		
	});
	
	</script>
</head>
<body>
	<h3>과일의 특성 조사</h3>
	<table id="fruit" border="1">
	 </table>
</body>
</html>
<?xml version="1.0" encoding="UTF-8"?>
<items>
	<item id="1" name="레몬">
		<price>3000</price>
		<description> 레몬에 포함되어 있는 쿠엔산은 피로회복에 좋다. 비타민C도 풍부하다. </description>
	</item>

	<item id="2" name="키위">
		<price>2000</price>
		<description> 비타민C가 매우 풍부하다. 다이에트와 미용에도 매우 좋다. </description>
	</item>

	<item id="3" name="블루베리">
		<price>5000</price>
		<description> 블루베리에 포함된 anthocyanin(안토시아닌)은 눈피로에 효과가 있다. </description>
	</item>

	<item id="4" name="체리">
		<price>5000</price>
		<description> 체리는 맛이 단 성분이 많고 피로회복에 잘 듣는다. </description>
	</item>

	<item id="5" name="메론">
		<price>5000</price>
		<description> 메론에는 비타민A와 칼륨이 많이 포함되어 있다. </description>
	</item>

	<item id="6" name="수박">
		<price>15000</price>
		<description> 수분이 풍부한 과일이다.</description>
	</item>
</items>

jQuery의 Ajax가 제공하는 Shorthand Method인 .getJSON() 메소드 예시

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<script src="../js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">

	$(function(){
		
		//$.getJSON(요청utl, success했을 때 수행할 함수) => json 파일을 읽어와 사용할 때 사용하는 함수
		$.getJSON('item.json', function(data, textStatus){ // data : json데이터가 들어있는 객체, textStatus : 성공여부 
			//alert(data);
			//alert(textStatus); // success
		
			//table 요소에 열 이름 추가	
			var str = ""
			str += "<tr>";
			str += "<td>id</td>";
			str += "<td>name</td>";
			str += "<td>price</td>";
			str += "<td>description</td>";
			str += "</tr>";
			$('table').append(str);
			
			//json을 가져와 객체의 정보를 table 요소에 행으로 추가(json 데이터가 들어있는 객체 이용)	
			$.each(data,function(){
				$('table').append("<tr>"
				+"<td>" + this.id + "</td>"
				+"<td>" + this.name + "</td>"
				+"<td>" + this.price + "</td>"
				+"<td>" + this.description + "</td>"
				+"</tr>"
				);
			});
			
			/* json객체를 다룰때 코드를 아래와 같이도 사용 가능 
			$(data).each(function(){ // 참고로 배열도 이렇게 사용가능했음
				내부코드 동일
			}); 
			*/
		});		
	});

	
	</script>
</head>
<body>
	<h3>과일의 특성 조사</h3>
	<table id="fruit" border="1">
	 </table>
</body>
</html>
[
  {
    "id": "1", 
    "name": "레몬",
    "price": " 3000",
    "description": "레몬에 포함되어 있는 쿠엔산은 피로회복에 좋다. 비타민C도 풍부하다."
  },
  {
    "id": "2",
    "name": "키위",
    "price": " 2000",
    "description": "비타민C가 매우 풍부하다. 다이에트와 미용에도 매우 좋다."
  },
  {
    "id": "3",
    "name": "블루베리",
    "price": " 5000",
    "description": "블루베리에 포함된 anthocyanin(안토시아닌)은 눈피로에 효과가 있다."
  },
  {
    "id": "4",
    "name": "체리",
    "price": " 5000",
    "description": "체리는 맛이 단 성분이 많고 피로회복에 잘 듣는다."
  },
  {
    "id": "5",
    "name": "메론",
    "price": " 5000",
    "description": "메론에는 비타민A와 칼륨이 많이 포함되어 있다."
  },
  {
    "id": "6",
    "name": "수박",
    "price": "15000",
    "description": "수분이 풍부한 과일이다."
  }
]

 

 

저작자표시

'K-DigitalTraining 강의 > 7. JQuery' 카테고리의 다른 글

[8주차] 33. jQuery로 회원가입 form 유효성 검사하기  (0) 2022.07.17
[8주차] 32. Ajax를 위한 메소드 중, Low-Level Interface 예시[ ajax() ] ***  (0) 2022.07.17
[8주차] 30. Ajax란? & jQuery가 제공하는 Ajax를 위한 메소드들  (0) 2022.07.17
[8주차] 29. Ajax 공부전, XML과 JSON의 형식 차이알기  (0) 2022.07.17
[8주차] 28. 사진을 위 아래 혹은 좌우로 부드럽게 움직이게 하기 [ animate() ]  (0) 2022.07.17
'K-DigitalTraining 강의/7. JQuery' Related Articles more
Comments