8/12 [Ajax] Test2. 서버로부터 객체 주고 받기

티스토리 뷰

SCIT/8월

8/12 [Ajax] Test2. 서버로부터 객체 주고 받기

Seraphim_ 2024. 8. 12. 17:15

1. HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ajax Test 2</title>
    <link rel="stylesheet" th:href="@{/static/css/styles.css}">
    <script th:src="@{/static/jq/jquery-3.7.1.min.js}"></script>
    <script th:src="@{/static/js/test2JS.js}"></script>
</head>
<body>
<div class="container">
    <header>
        <h1>[ Ajax Test 2 - 객체 보내기/받기 ]</h1>
    </header>
    <main>
        <div id="content" class="content">
            <!-- AJAX 로드된 데이터가 아래에 표시됩니다. -->
            <form>
                <label>1. 서버로 객체 보내기</label>
                이름 : <input type="text" id="name"><br>
                나이 : <input type="text" id="age"><br>
                전화 : <input type="text" id="phone"><br>
                <button type="button" id="button1">저장</button>
            </form>
            <hr>
            <!-- 항목이 많을 때 사용하기 좋음 -->
            <form id="form">
                <label>2. 서버로 객체 보내기</label>
                이름 : <input type="text" name="name"><br>
                나이 : <input type="text" name="age"><br>
                전화 : <input type="text" name="phone"><br>
                <button type="button" id="button2">저장</button>
            </form>
            <hr>
            <form>
                <label>3. 서버로부터 객체 받기</label>
                <p><button type="button" id="button3">받기</button></p>
                <div id="objectOutput"></div>
            </form>
            <hr>
            <form>
                <label>4. 서버로부터 리스트 받기</label>
                <p><button type="button" id="button4">받기</button></p>
                <div id="listOutput"></div>
            </form>
            <hr>
            <form>
                <label>5. 서버로 배열 보내기</label>
                <p><button type="button" id="button5">보내기</button></p>
            </form>
            <hr>
            <form>
                <label>6. 서버로 객체배열 보내기</label>
                <p><button type="button" id="button6">보내기</button></p>
            </form>
        </div>
    </main>
    <footer>
        <p>&copy; 2024.08.12 AJAX Practice</p>
    </footer>
</div>
</body>
</html>

2. JavaScript (With Ajax)

$(document).ready(function () {
    $('#button1').click(function () {
        let inputData = {
            name : $('#name').val(), // 이름 입력 필드의 값을 가져옴
            age : $('#age').val(), // 나이 입력 필드의 값을 가져옴
            phone : $('#phone').val(), // 전화번호 입력 필드의 값을 가져옴
        };

        $.ajax({
            url: 'input', // 서버로 데이터를 보낼 URL
            type : 'post', // HTTP 메서드 타입을 POST로 설정
            data : inputData, // 서버로 전송할 데이터를 설정
            success : function () {
                alert('저장 성공'); // 성공 시 알림 메시지 표시
            },
            error : function () {
                alert('저장 실패'); // 실패 시 알림 메시지 표시
            }
        });
    }); // button1 이벤트 핸들러 종료

    // 폼 전송하기
    $('#button2').click(function () {
        $.ajax({
            url : 'input', // 서버로 데이터를 보낼 URL
            type : 'post', // HTTP 메서드 타입을 POST로 설정
            // 아이디가 form인 곳의 모든 입력값을 직렬화하여 서버로 전송
            data : $('#form').serialize(),
            success : function () {
                alert('저장 성공'); // 성공 시 알림 메시지 표시
            },
            error : function () {
                alert('저장 실패'); // 실패 시 알림 메시지 표시
            }
        })
    }); // button2 이벤트 핸들러 종료

    $('#button3').click(function () {
        $.ajax({
            url: 'getObject', // 서버로부터 객체를 받을 URL
            type : 'get', // HTTP 메서드 타입을 GET으로 설정
            dataType : 'json', // 응답 데이터 타입을 JSON으로 설정
            success : function (res) {
                // 서버로부터 받은 객체 데이터를 HTML 테이블 형식으로 변환
                let txt =
                    `<table>
                    <tr>
                    <th>이름</th>
                    <td>${res.name}</td>
                    </tr>
                    <tr>
                    <th>나이</th>
                    <td>${res.age}</td>
                    </tr>
                    <tr>
                    <th>전화</th>
                    <td>${res.phone}</td>
                    </tr>
                    </table>`;
                $('#objectOutput').html(txt); // 테이블을 지정된 div에 추가
            },
            error: function () {
                alert('받기 실패'); // 실패 시 알림 메시지 표시
            }
        });
    }); // button3 이벤트 핸들러 종료

    $('#button4').click(function () {
        $.ajax({
            url : 'getList', // 서버로부터 리스트를 받을 URL
            type : 'get', // HTTP 메서드 타입을 GET으로 설정
            dataType : 'json', // 응답 데이터 타입을 JSON으로 설정
            success : function (list) {
                // 서버로부터 받은 리스트 데이터를 HTML 테이블 형식으로 변환
                let txt =
                    `<table>
                    <tr>
                    <th>번호</th>
                    <th>이름</th>
                    <th>나이</th>
                    <th>전화</th>
                    </tr>`;
                $(list).each(function (idx, ob) {
                    // 리스트 내의 각 객체 데이터를 테이블 행으로 추가
                    txt += `<tr>
                    <td>${idx + 1}</td>
                    <td>${ob.name}</td>
                    <td>${ob.age}</td>
                    <td>${ob.phone}</td>
                    </tr>`;
                });
                txt += `</table>`; // 테이블 닫기
                $('#listOutput').html(txt); // 테이블을 지정된 div에 추가
            },
            error: function () {
                alert('받기 실패'); // 실패 시 알림 메시지 표시
            }
        });
    }); // button4 이벤트 핸들러 종료

    $('#button5').click(function () {
        let ar = ['Alpha', 'Beta', 'Gamma']; // 서버로 전송할 문자열 배열
        $.ajax({
            url : 'sendArray', // 서버로 배열을 보낼 URL
            type : 'post', // HTTP 메서드 타입을 POST로 설정
            traditional : true, // 전송 방식 설정 (일반적으로 배열 전송 시 필요)
            data : {ar : ar}, // 서버로 전송할 데이터 설정
            success : function () {
                alert('전송 완료'); // 성공 시 알림 메시지 표시
            },
            error: function () {
                alert('전송 실패'); // 실패 시 알림 메시지 표시
            }
        });
    }); // button5 이벤트 핸들러 종료

    $('#button6').click(function () {
        let ar = [{name:'라파엘', age:929, phone:'010-0000-0000'},
            {name:'세라핌', age:1002, phone:'010-0000-0000'}]; // 서버로 전송할 객체 배열
        $.ajax({
            url : 'sendObjectArray', // 서버로 객체 배열을 보낼 URL
            type : 'post', // HTTP 메서드 타입을 POST로 설정
            data : {ar : JSON.stringify(ar)}, // 객체 배열을 JSON 문자열로 변환하여 서버로 전송
            success : function () {
                alert('전송 완료'); // 성공 시 알림 메시지 표시
            },
            error : function () {
                alert('전송 실패'); // 실패 시 알림 메시지 표시
            }
        });
    }); // button6 이벤트 핸들러 종료

}); // $(document).ready() 이벤트 핸들러 종료

3. Controller

package net.datasa.test_ajax;

import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.core.type.TypeReference;
import com.fasterxml.jackson.databind.ObjectMapper;
import lombok.RequiredArgsConstructor;
import lombok.extern.slf4j.Slf4j;
import net.datasa.test_ajax.domain.DTO.PersonDTO;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;

import java.util.ArrayList;
import java.util.List;

@Slf4j // 로깅 기능을 제공하는 Lombok 어노테이션
@RequiredArgsConstructor // 필수 생성자를 자동으로 생성하는 Lombok 어노테이션
@Controller // Spring MVC의 컨트롤러 역할을 하는 어노테이션
public class AjaxTest2Controller {

    // ajax2.html로 포워딩. 연습 페이지 두번째
    @GetMapping("ajax2")
    public String ajax2() {
        return "AjaxTest/ajax2"; // "AjaxTest/ajax2"라는 뷰 이름을 반환, 뷰 리졸버가 해당 HTML 페이지를 로드함
    }

    // button1, 2의 요청을 처리하는 메서드
    // 서버로 요청을 보낼 때 PersonDTO 객체를 받아 처리
    @ResponseBody // 반환되는 데이터를 JSON이나 XML 형식으로 변환하여 HTTP 응답 바디에 직접 씀
    @PostMapping("input")
    public void input(PersonDTO dto) {
        log.debug("AjaxTest2Controller의 input() 메소드로 전달된 객체 : {}", dto); // 로그에 DTO 객체를 출력
        // 이 메서드는 아무 데이터도 반환하지 않음
    }

    // button3의 요청을 처리하는 메서드
    @ResponseBody
    @GetMapping("getObject")
    public PersonDTO getObject() {
        PersonDTO dto = new PersonDTO("김세라", 23, "010-3333-3333"); // 새로운 PersonDTO 객체 생성
        return dto; // 생성된 객체를 JSON 형식으로 반환
    }

    // button4의 요청을 처리하는 메서드
    @ResponseBody
    @GetMapping("getList")
    public List<PersonDTO> getList() {
        List<PersonDTO> list = new ArrayList<>(); // PersonDTO 객체를 담을 리스트 생성
        list.add(new PersonDTO("최요한", 25, "010-4444-4444"));
        list.add(new PersonDTO("이세실리아", 34, "010-5555-5555"));
        list.add(new PersonDTO("박요셉", 45, "010-6666-6666"));
        return list; // 리스트를 JSON 형식으로 반환
    }

    // button5의 요청을 처리하는 메서드
    @ResponseBody
    @PostMapping("sendArray")
    public void sendArray(@RequestParam("ar") String[] ar) {
        for (String s : ar) {
            log.debug("배열요소 : {}", s); // 배열의 각 요소를 로그에 출력
        }
    }

    // button6의 요청을 처리하는 메서드
    @ResponseBody
    @PostMapping("sendObjectArray")
    public void sendObjectArray(@RequestParam("ar") String ar) throws JsonProcessingException {
        log.debug("전달된 JSON문자열 : {}", ar); // 전달된 JSON 문자열을 로그에 출력
        ObjectMapper mapper = new ObjectMapper(); // Jackson의 ObjectMapper를 사용해 JSON을 Java 객체로 변환
        ArrayList<PersonDTO> list = mapper.readValue(ar, new TypeReference<ArrayList<PersonDTO>>() {}); // JSON 문자열을 ArrayList<PersonDTO>로 변환
        log.debug("변환결과 리스트 : {}", list); // 변환된 리스트를 로그에 출력
    }
}

4. DTO

package net.datasa.test_ajax.domain.DTO;

import lombok.AllArgsConstructor;
import lombok.Builder;
import lombok.Data;
import lombok.NoArgsConstructor;

@Builder
@Data
@AllArgsConstructor
@NoArgsConstructor
public class PersonDTO {
    String name;
    Integer age;
    String phone;
}

5. Jackson의 ObjectMapper

Java 객체를 JSON으로 변환하거나 JSON을 Java 객체로 변환하는 데 사용되는 강력한 도구이며, Jackson 라이브러리의 핵심 클래스

1) 기능
① Java 객체를 JSON으로 직렬화(Serialization) : Java 객체를 JSON 형식의 문자열로 변환가능. 예를 들어, ObjectMapper를 사용하여 PersonDTO 객체를 JSON 문자열로 변환

ObjectMapper mapper = new ObjectMapper();
String jsonString = mapper.writeValueAsString(personDto);

② JSON을 Java 객체로 역직렬화(Deserialization) : JSON 문자열을 Java 객체로 변환가능. 예를 들어, JSON 문자열을 PersonDTO 객체로 변환

PersonDTO personDto = mapper.readValue(jsonString, PersonDTO.class);

③ 유연한 설정 및 확장성 : 다양한 설정 옵션을 제공하여 직렬화와 역직렬화의 동작을 제어가능. 예를 들어, 필드 이름을 소문자로 변환하거나 특정 필드를 무시하는 등의 설정이 가능
④ 컬렉션 및 복잡한 데이터 구조 처리 : List, Map 등의 컬렉션이나 복잡한 데이터 구조 처리가능. 예를 들어, JSON 배열을 List<PersonDTO>로 변환

'SCIT > 8월' 카테고리의 다른 글

8/14 [Ajax] Test5. 댓글 저장, 수정, 삭제 (0)	2024.08.14
8/13 [Ajax] Test3. 추천 (0)	2024.08.13
8/9 Spring Test. 성적 입력 (0)	2024.08.12
8/8 [Ajax] Test1(2) (0)	2024.08.08
8/7 [Ajax] Test1(1) (0)	2024.08.07

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2025/01 »
일	월	화	수	목	금	토
			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

글 보관함

SERAPHIM

티스토리 뷰