[Spring] REST 기초 - 4 : Ajax - put(갱신, update)

날짜:

 REST 방식에서의 ajax는 type 값을 "put"으로 지정한다.

① : 업데이트의 경우 "PUT" 로 고정 

② : 요청하거나 받은 URL

③ : 전송 데이터

※ ajax를 이용하므로, 전송 데이터를 json 형식으로 지정할 필요가 있음
- JOSON.stringify(전송에 사용될 데이터 변수 명)

④ : 전송 데이터 타입(application/json;charset=utf-8 사용)

⑤ : 전송/수신 성공 시 수행 할 동작이나 callback 함수 사용

- function(data)의 data는 수신 받은 데이터를 저장함

⑥ : 전송/수신 실패 시 수행 할 동작이나 callback 함수 사용(주로 오류 출력)


응답 처리 controller 부분

1
2
3
4
5
6
7
8
9
10
11
12
13
/* 
   request RequestMethod.PUT : REST PUT 처리 
   RequestMethod.PATCH : REST PUT(일부)처리
   consumes : 받는 값의 타입 명시
*/
@RequestMapping(method = {RequestMethod.PUT, RequestMethod.PATCH}, value="/{bno}", consumes = "application/json")
    public ResponseEntity<String> modify(@RequestBody BoardVO vo, @PathVariable("bno") Long bno){
        vo.setBno(bno);
        log.info("bno : "+bno);
        log.info("modify : "+vo);
        // 갱신 성공시 1, 실패시 0
        return mapper.update(vo) == 1 ? new ResponseEntity<String>("success", HttpStatus.OK) : new ResponseEntity<String>(HttpStatus.INTERNAL_SERVER_ERROR);
    }
cs

※@PathVariable

- value 값으로 들어가는 url의 일부를 매개변수로 사용함을 알림

- value="{변수 명}" 으로 value 값에 명시


※ RequestMethod.PUT, RequestMethod.PATCH

출처 : 참고 블로그


- 같은 요청(갱신)을 처리할 때, put의 경우 없는 속성에 대해서는 null 처리가 되나, patch의 경우 자동으로 없는 속성에 대해 처리한다.

- 실습 자바 스크립트

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function sampleUpdate(bvo, callback, error){
        console.log("update")
        $.ajax({
            type:'put',
            url:'/sample/'+bvo.bno, //pk에 대한 값을 url에 저장(get 방식)
            data : JSON.stringify(bvo),
            contentType : "application/json; charset=utf-8",
            success : function(result){
                if(callback){
                    callback(result);
                }
            },
            error : function(er){
                if(error){
                    error(er)
                }
            }
        });
    
    }
cs


- 실습 jsp

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<div id = "sampletest">
<input type="hidden" name="bno" value="${board.bno}">
title : <input type="text" name="title" value="${board.title}"><br>
content : <input type="text" name="content" value="${board.content}"><br>
writer : <input type="text" name="writer" value="${board.writer}"><br>
</div>
 
<button id="sampleBtnUpdate">갱신</button>
 
</body>
<script src="http://code.jquery.com/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="/resources/js/sampleTest.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        //"갱신" 버튼 클릭시 갱신 동작 수행
        $("#sampleBtnUpdate").on("click", function(e){
            var divtest = $("#sampletest")
            //input 태그 수진
            var bno = divtest.find("input[name=bno]")
            var title = divtest.find("input[name=title]")
            var content = divtest.find("input[name=content]")
            var writer = divtest.find("input[name=writer]")
            
            //값에 대해 모두 수집 후 하나의 객체로 
            var bvo = {
                bno : bno.val(),
                title : title.val(),
                content : content.val(),
                writer : writer.val()
            };
            
            testService.sampleUpdate(bvo, function(result){
                console.log(result);
            })
            
        })
 
    })
 
</script>
</html>
cs


※ post 방식으로 갱신 동작은 가능하나, REST 방식을 사용한 것이 아닌, 단순 ajax를 이용한 방식이다. 


댓글

댓글 쓰기