JSON & Ajax
- json 형식의 데이터는 Key & Value의 쌍으로 이루어진 데이터
- {”key1”:”value1”,”key2”:”value2”…}
<!--pom.xml-->
<dependencies>
<!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-databind -->
<dependency> <!-- ajax -->
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.14.2</version>
</dependency>
</dependencies>- mvnrepository.com에서 jackson-databind를 위한 <denpendency> 복사
- pom.xml의 <dependencies> 내에 추가
Common Controller Manipulating
//controller
@Controller
public class JsonTestController {
@GetMapping("/list1")
@ResponseBody //json으로 처리후 브라우저로 출력(일반 컨트롤러일경우)
public Map<String, String> list1() {
Map<String, String> map=new HashMap<String, String>();
map.put("name", "장순영");
map.put("hp", "010-4924-0731");
map.put("addr", "수원시 장안구"); //{"name":"장순영","hp":~,"addr":~} json형식으로 저장
return map;
}
}- 일반적 컨트롤러 형식으로 Beans에 등록한 경우 (@Controller)
- 매핑 메서드가 소유한 데이터를 json 형식으로 변환하기 위한 작업 필요 (@ResponseBody : @GetMapping 아래에 혹은 메서드 반환 자료형 앞에 선언)
- 데이터는 절대 경로의 실제 파일이 아닌 Server Runtime에 저장되므로 return 값으로 절대 경로 반환 불필요
- 매핑 경로에는 저장된 json 형식의 데이터가 저장 및 출력
Controller Only For JSON Parsing Manipulating
//controller
@RestController //json처리 전용 컨트롤러
public class JsonTest2Controller {
@GetMapping("/list2")
public Map<String, String> ex2() {
Map<String, String> map=new HashMap<String, String>();
map.put("sang", "돈까스");
map.put("price", "9000");
map.put("count", "4");
return map;
}
}- @RestController로 Beans에 등록 시 해당 컨트롤러 클래스에 속한 모든 매핑 메서드는 json 처리만을 위해 사용됨
- 매핑 경로에는 저장된 json 형식의 데이터가 저장 및 출력
View
<!--view-->
<body>
<h3>ex1</h3>
<button type="button" id="btn1" class="btn btn-info">list1 json데이터 출력</button>
<div id="out1"></div>
<script>
$("#btn1").click(function(){
$.ajax({
type:"get",
dataType:"json",
url:"list1",
success:function(res){
$("#out1").append("이름: "+res.name+"<br>");
$("#out1").append("연락처: "+res.hp+"<br>");
$("#out1").append("주소: "+res.addr+"<br>");
}
});
});
</script>
</body>- json 자체가 ajax를 위한 자료형이므로 일반적으로 ajax 반환 자료형으로 사용
- 지정된 매핑 경로에 json 데이터가 저장되므로, url 값을 해당 매핑 경로로 입력
<body>
<h3>ex2</h3>
<button type="button" id="btn2" class="btn btn-danger">list2 json데이터 출력</button>
<div id="out2"></div>
<script>
$("#btn2").click(function(){
$.ajax({
type:"get",
dataType:"json",
url:"list2",
success:function(res){
$("#out2").append("상품: "+res.sang+"<br>");
$("#out2").append("단가: "+res.price+"원<br>");
$("#out2").append("개수: "+res.count+"개<br>");
$("#out2").append("총금액: "+res.price*res.count+"원<br>");
}
});
});
</script>
</body>- Spring Framework 특성 상 request에 저장된 값이 String에 국한되지 않음
- request를 통해 전달 받은 값이 숫자라면 parsing하지 않고도 연산 가능
초보개발자