메모 변경하기 - submitEdit 함수

개발 스펙 확인

- 작성 대상 메모의 username과 contents 를 확인

- 작성한 메모가 올바른지 확인

- 전달할 data 를 JSON으로 바꾸기

- PUT /api/memos/{id} 에 data를 전달

 

function submitEdit

1. 전과 같은 방법으로, 크롬의 검사를 통해 해당 영역의 id 확인

2. 해당 id로 아래의 코드를 삽입.

let username = $(`#${id}-username`).text().trim();
let contents = $(`#${id}-textarea`).val().trim();

 

3. 작성한 메모가 올바른지 확인

if (isValidContents(contents) == false) {
    return;
}

 

4. 전달할 data를 JSON으로 변경

let data = {'username': username, 'contents': contents};

 

5. Ajax를 통한 PUT으로 Data 전달

$.ajax({
    type: "PUT",
    url: `/api/memos/${id}`,
    contentType: "application/json",
    data: JSON.stringify(data),
    success: function (response) {
        alert('메시지 변경에 성공하였습니다.');
        window.location.reload();
    }
});

 

크롬에서 확인

 

submitEdit 함수 코드

            // 메모를 수정
            function submitEdit(id) {
                // 1. 작성 대상 메모의 username과 contents 를 확인합니다.
                let username = $(`#${id}-username`).text().trim();
                let contents = $(`#${id}-textarea`).val().trim();
                // 2. 작성한 메모가 올바른지 isValidContents 함수를 통해 확인합니다.
                if (isValidContents(contents) == false) {
                    return;
                }
                // 3. 전달할 data JSON으로 만듭니다.
                let data = {'username': username, 'contents': contents};
                // 4. PUT /api/memos/{id} 에 data를 전달합니다.
                $.ajax({
                    type: "PUT",
                    url: `/api/memos/${id}`,
                    contentType: "application/json",
                    data: JSON.stringify(data),
                    success: function (response) {
                        alert('메시지 변경에 성공하였습니다.');
                        window.location.reload();
                    }
                });
            }