Spring 비동기 검색 제작

mian.jsp

    <p>
        <select name="board_search_key" id="key">
            <option value="NAME" ${param.board_search_key eq 'NAME' ? 'selected' : ''}>이름</option>
            <option value="CONTENT" ${param.board_search_key eq 'CONTENT' ? 'selected' : ''}>내용</option>
            <option value="TITLE" ${param.board_search_key eq 'TITLE' ? 'selected' : ''}>제목</option>
        </select>
        <input type="text" name="board_search_value" id="context" class="form-floating mb-4" property="검색어를 입력해주세요" value="${param.board_search_value}"/>
        <button id="search_board" class="btn btn-primary mb-3">검색</button>
    </p>

 

Board.js

$(document).ready(function() {
    $('#search_board').on('click',function() {
        var context = $("#context").val();
        console.log('SearchBoard.js log context : ['+context+"]");
        var key = $("#key").val();
        console.log('SearchBoard.js log key : ['+key+']');
        var data_container = $('#data_container');

        data_container.empty();

        $.ajax({
            url : "search.do",
            type: "POST",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            data : JSON.stringify({'board_search_key' : key , 'board_search_value' : context}),
            success : function(datas) {
                console.log('SearchBoard.js log datas : ['+datas+']');
                //데이터가 있다면 데이터를 삭제해주고
                data_container.empty();
                datas.forEach(data => {
                    var html = '<tr>' +
                        '<td>' + data.board_num + '</td>' +
                        '<td class="titleAndContent">' + (key === 'TITLE' ? data.board_title : data.board_content) + '</td>' +
                        '<td class="board_writer_name">' + (key === 'NAME' ? data.board_name : data.board_writer_id) + '</td>' +
                        '<td><a href="view.do?board_num=' + data.board_num + '" class="btn btn-info mb-2">보기</a></td>' +
                        '</tr>';
                    data_container.append(html);
                });
            },
            error : function() {
                data_container.append('<tr><td colspan="5" class="text-center">'+context+'에 대한 게시글이 없습니다.</td></tr>');
            }
        })
    })
})

BoardViewPageController.java

	@PostMapping("/search.do")
	public @ResponseBody List<BoardDTO> searchBoard(@RequestBody BoardDTO boardDTO){
		System.err.println("비동기 실행");
		System.err.println("BoardViewPageController.java log BoardDTO : ["+boardDTO+"]");
		List<BoardDTO> datas = boardService.SelectAll(boardDTO);
		System.err.println("BoardViewPageController.java log datas : ["+datas+"]");
		return datas;
	}

 

DTO DAO는 모두 동일하다.

비동기 과제를 하면서 유심히 봐야하는 부분은 @(어노테이션)이다.

@ResponseBody(비동기 데이터를 전달하기 위함), @RequestBody(비동기 데이터를 받기 위함)