JQuery

[jQuery] getJSON

NamGH 2023. 9. 22. 16:32
getJSON : JSON으로 표현한 데이터를 얻어 온다.
                 특정 파일에 저장해 둔 데이터를 로드하는 전역 메소드이다.

 

매개변수

url : 요청할 서버 측 자원의

URL data : 요청할 때 서버에 보낼 자바스크립트 객체 맵이나 문자열 형식의 데이터

success : 요청이 성공했을 때 호출할 콜백 함수

 

예제
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
	$(function(){
		$.getJSON('item.json',function(data){
			//alert(data);
			$('#fruitTable').append("<tr>" + 
									"<th>id</th>"+ 
									"<th>name</th>" + 
									"<th>price</th>"+ 
									"<th>description</th>"+
									"</tr>");
			
			$.each(data,function(){
				$('#fruitTable').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>
	<table id="fruitTable" border="1">
	
	</table>
</body>
</html>

 

 

실행결과
json파일을 읽어옴