1교시
ajax3
ResponseEntity, (인수 2개)
- 반환타입 스프링 클래스
- ajax 응답할 때 쓰라고 만들어 놓은 것
- @ResponseBody를 쓰지 않고도 ajax 응답할 수 있다
- 일종의 wrapper다. list를 반환하고 싶을 때 이걸 ResponseEntity라는 wrapper에 싸서 보내는 것과 같은 상황 (감싸는 주된 이유: list 뿐 아닌 다른 것들을 추가로 더 넣어서 묶어주려고)
@GetMapping(value="/list.do", produces="application/json; charset=UTF-8")
public ResponseEntity<List<AjaxDto>> list() {
return new ResponseEntity<List<AjaxDto>>( // ResponseEntity는 @ResponseBody를 작성하지 않는다.
ajaxService.getDtoList() // 실제 응답 데이터
, HttpStatus.OK); // 응답 코드 (200)
}ResponseEntity의 인수가 두개인 경우 첫번째 인수로는 응답 데이터를 넣어준다. 보낼 데이터 (여기선 ajaxService.getDtoList())
ResponseEntity의 두번째 인수로는 응답코드를 넣어준다. HttpStatus
이름 넘겨주는 다양한 방법
상세보기 처리를 위해서 각 목록을 클릭했을 때 이름(name)을 넘겨주는 방법을
1. 목록을 구성하는 (클릭한) div 하위 태그로 span을 집어넣고 그 span안에 name을 넣은 후 찾을 때 find로 span을 찾고 그 내부 텍스트를 뜻하는 .text를 써서 이름을 넘겨준다
(어제한거)
- 클릭한 div의 형제태그로 input 태그의 value를 넣어줘서 이름을 넘겨준다.
$('#list').append('<div class="row">' + elem.name + ', ' + elem.age + '</div><input type="hidden" value="' + elem.name + '">');
3. 클릭한 div에 data 속성 data-name을 추가해서 이름을 넘겨준다.
2교시
데이터로 json 자체를 넘기기
- 요청을 post로 바꿔야 한다. get은 주소창에 데이터를 실어서 보내는 방식인데 json 데이터는 그렇게 보낼 수 없기 때문이다. post는 서버로 보낼 데이터를 요청 본문에 저장하는 방식이다
- stringfy 문자열 만들어줌, JSON.stringify는 파라미터로 보내는 방식이 아니다. => 파라미터가 아니기 때문에 @RequestParam(value="name")으로 받는거 불가능 ==> 대신 @RequestBody (요청 본문)를 사용한다
@RequestBody
json 데이터의 속성과 일치하는 이름을 필드로 가지고 있는 Dto로 받을 수 있다. (Dto가 가능하면 Map도 가능) - 잘 모르겠으면 map 선언하셈. json도 key value 형식이라
ResponseEntity (인수 3개)
- ResponseEntity의 인수가 세개인 경우 = 응답 헤더(중 content-type)를 제작할 때
- 응답 헤더를 만드는 방식은 produces를 대신할 수 있다
@PostMapping(value="/detail.do")
public ResponseEntity<AjaxDto> detail(@RequestBody AjaxDto ajaxDto) { // post 방식(@RequestBody)으로 전송된 JSON 데이터(AjaxDto ajaxDto)
// 응답 헤더 : Content-Type (produces="application/json; charset=UTF-8"을 대체한다.)
HttpHeaders header = new HttpHeaders();
header.add("Content-Type", "application/json; charset=UTF-8");
// 반환
return new ResponseEntity<AjaxDto>( // ResponseEntity는 @ResponseBody를 작성하지 않는다.
ajaxService.getDto(ajaxDto.getName()) // 실제 응답 데이터
, header // 응답 헤더
, HttpStatus.OK); // 응답 코드 (200)
}
}3교시
이미지 가져오기
ajax4.jsp
<script>
$(function(){
fnImage();
})
function fnImage(){
$('#btn_image').click(function(){
var path = encodeURIComponent('C:\\GDJ69\\assets\\image');
var filename = $('#image').val();
$('#display').empty();
$('#display').append('<img src="${contextPath}/ajax4/display.do?path=' + path + '&filename=' + filename + '" width="192px">');
})
}
</script>
</head>
<body>
<%-- HDD에 저장된 이미지를 표시하기 --%>
<div>
<select id="image">
<c:forEach var="n" begin="1" end="10" step="1">
<option>animal${n}.jpg</option>
</c:forEach>
</select>
<button id="btn_image">이미지 가져오기</button>
</div>
<hr>
<div id="display"></div>
</body>- 경로 작성시 path가 자바로 넘어가면 역슬래시 하나는 인식 못하기 때문에 두개로 적어줌. (\GDJ69에서 \는 \G로 인식됨, \assets, \image도 마찬가지) -> 역슬래시는 보낼 때 인코딩 문제가 발생하므로 js 함수로 인코딩해서 보내줌 (encodeURIComponent)
- img 태그는 원래 처리 못하기 때문에 path, filename을 자바로 보내서 요청하고 자바에서는 File 객체로 접근해서 바이트 배열로 만든 후 응답으로 반환 (AjaxController04에서 진행)
AjaxController04
@Controller
public class AjaxController4 {
@GetMapping(value="/ajax4/display.do", produces="application/octet-stream") // "application/octet-stream" : 이진 데이터(0, 1) 자체를 의미한다.
public ResponseEntity<byte[]> display(@RequestParam("path") String path
, @RequestParam("filename") String filename) {
ResponseEntity<byte[]> responseEntity = null;
try {
// File 객체
File file = new File(path, filename);
// File 객체를 byte[]로 변환하는 Spring 클래스
byte[] b = FileCopyUtils.copyToByteArray(file);
// ResponseEntity 객체 생성
responseEntity = new ResponseEntity<byte[]>(b, HttpStatus.OK);
} catch (Exception e) {
e.printStackTrace();
}
return responseEntity;
}
}- FileCopyUtils : File 객체를 byte[ ]로 변환하는 Spring 클래스
- application/octet-stream : 바이트 배열의 데이터 타입 (생략이 된다는데)
- 원래 컨트롤러는 요청만 하는게 좋은데 (가볍게 만드는게 좋음) 여기선 그냥... 원래는 이미지 경로 서비스로 보내서 dao로 가고 dao는 해당하는 파일을 db에서 조회 후 select로 가져오고 path와 filename을 반환하면 서비스가 위의 작업을 수행하는 것
원하는 이미지 선택 후 이미지 가져오기 버튼 누르면 이미지가 불러와짐
ajax4.jsp에서 $('#display').empty(); 해주기 전이라 가져온 이미지 계속 누적되는거
4교시
8장 만들기
맵반환
5교시
4교시 이어서
6교시
계속 이어서
주말 과제 안내
