검색 기능 (2)

Controller

	@GetMapping("/detail")
	public void detail(Model model, Integer boardId, @ModelAttribute("pagination") Pagination pagination) {
		log.info("detail()");
		log.info("boardId = " + boardId);
		log.info("pagination = " + pagination);
		BoardDTO boardDTO = boardService.getBoardById(boardId);

		model.addAttribute("boardDTO", boardDTO);
	} // end detail()

detail.jsp

	<!-- 게시글 번호, 페이지 번호, 페이지 사이즈를 전송하는 form  -->
		<form id="detailForm" action="detail" method="get">
			<input type="hidden" name="boardId" >
			<input type="hidden" name="pageNum" >
		    	<input type="hidden" name="pageSize" >
	    		<input type="hidden" name="type" >
			<input type="hidden" name="keyword" >
		</form>
		

detail 컨트롤러와 jsp 코드를 살펴보자.

컨트롤러에서는 사용자가 선택한 게시글을 boardId를 사용해 조회하고,
선택된 게시글에 들어있는 데이터를 Model을 통해 뷰로 전달해 사용자에게 보여준다.

jsp에서는 액션을 통해 컨트롤러의 @GetMapping("/detail") 메서드와 연결하고, method=get을 통해 데이터를 쿼리 스트링 형식으로 전송한다.
이렇게 전달된 데이터는 추후 URL이 된다.
그리고 form id=detailForm을 통해 폼에 고유 식별자를 부여한다. 여기서 부여된 식별자는 추후 자바 스크립트에서 이 폼의 값을 가져올 때 사용된다.

자바스크립트

	// detail_button을 클릭하면 페이지 이동
			$(".detail_button a").on("click", function(e){
				var detailForm = $("#detailForm");
				e.preventDefault(); // a 태그 이벤트 방지
			
				var boardId = $(this).attr("href"); // a태그의 href 값 저장

				var type = "<c:out value='${pageMaker.pagination.type }' />";
				var keyword = "<c:out value='${pageMaker.pagination.keyword }' />";
				var pageNum = "<c:out value='${pageMaker.pagination.pageNum }' />";
				// 현재 페이지 사이즈값 저장
				var pageSize = "<c:out value='${pageMaker.pagination.pageSize }' />";
				 
				// 클릭된 게시글 번호를 input name='boardId' 값으로 적용
				detailForm.find("input[name='boardId']").val(boardId);
				// 페이지 번호를 input name='pageNum' 값으로 적용
				detailForm.find("input[name='pageNum']").val(pageNum);
				// 선택된 옵션 값을 input name='pageSize' 값으로 적용
				detailForm.find("input[name='pageSize']").val(pageSize);
				// type 값을 적용
				detailForm.find("input[name='type']").val(type);
				// keyword 값을 적용
				detailForm.find("input[name='keyword']").val(keyword);
				detailForm.submit(); // form 전송
			}); // end on()
			
			

(여기서 detail_button은 특정 게시글로 이동하는 버튼이다.)
이 버튼을 누르면, 위에서 작성했던 detailForm에서 히든 타입으로 input된 값을 전부 받아온다.
그리고 클릭된 게시글의 boardId를 저장한다. 위의 경우 URL은

localhost:8080/mysite/board/detail?boardId=5

...가 된다.

그 아래로는 타입, 키워드, 페이지 번호, 페이지 사이즈 등이 존재하는데,
아직 검색 기능을 넣지 않았고, 페이지네이션만 넣어져있는 형태라 type과 keyword는 값이 없다.

그 아래로는 detailForm에 히든 타입으로 input된 요소들을 하나씩 찾아오고, .val()을 통해 불러온 값으로 설정 한다.

이를 제출하면 완성된 URL이 나온다.

결과 URL
http://localhost:8080/mysite/board/detail?boardId=13&pageNum=1&pageSize=5&type=&keyword=