[Spring] 7장 스프링과 Ajax 연동 - Ajax를 이용한 게시판 검색 기능 구현 / 날짜 형식 설정 및 한글 인코딩

실습 코드 참조

moonhy7/SpringFramework: Spring Framework 실습 코드 정리 (github.com)

GitHub - moonhy7/SpringFramework: Spring Framework 실습 코드 정리

Spring Framework 실습 코드 정리. Contribute to moonhy7/SpringFramework development by creating an account on GitHub.

github.com

1. 프로젝트 생성 ( _080_BoardWeb_Spring_MVC_Ajax )

1) 77번 프로젝트 복사하여 프로젝트 생성

2) js라이브러리 추가

- js 폴더 생성하여 jquery-3.6.0.min.js 파일 붙여넣기

2. JSP 파일 (getBoardList.jsp) 코드 수정

- <head>와 <body>부분에 <script> 추가

<head>
  <script src="js/jquery-3.6.0.min.js"></script>
</head>

<body>
  <script>
    $(document).ready(function() {
      $("#btn_Search").click(function() {
        $.ajax({
          url : 'getBoardListSearch.do',
          type : 'POST',
          data : $("#form_Search").serialize(),
          success : function(obg) {
          console.log(obj);
          },
          error : function(e) {
          console.log(e);
          }
        });
      });
    });
  </script>
</body>

3. BoardController 클래스에 getBoardListSearch() 메소드 추가

	@RequestMapping(value="/getBoardListSearch.do")
	@ResponseBody
	public String getBoardListSearch(BoardVO vo) throws JsonProcessingException {
		System.out.println("글 목록 검색 처리");
		
		//자바에서 JSON 객체로 변환해주는 라이브러리
		//1. jackson.Objectmapper (우리가 사용할 것)
		//2. JsonView
		ObjectMapper mapper = new ObjectMapper();
		HashMap<String, Object> hashMap = new HashMap<String, Object>();
		System.out.println("searchKeyword====" + vo.getSearchKeyword());
		
		//Null check
		//로그인 화면에서 로그인성공 시 getBoardList.do 호출 할 때 searchKeyword, searchCondition 값의 null 방지 
		if(vo.getSearchCondition() == null) {
			vo.setSearchCondition("TITLE");
		} 
		if(vo.getSearchKeyword() == null) {
			vo.setSearchKeyword("");
		} 
		
		List<BoardVO> boardList = boardService.getBoardList(vo);
		hashMap.put("boardList", boardList);
		
		String json = mapper.writerWithDefaultPrettyPrinter().writeValueAsString(hashMap);
		System.out.println("json String =============================================" + json);
		
		return json;
	}

4. 실행 결과

- 검색한 결과값만 출력이 된다.

5. 배열로 출력되도록 코드 수정

- getBoardList.jsp 파일 Ajax 코드 수정

var data = JSON.parse(obj);
console.log(data.boardList); //배열로 가져옴

6. getBoardList.jsp 파일 Ajax 코드

<script>
  $(document).ready(function() {
    $("#btn_Search").click(function() {
      $.ajax({
        url : 'getBoardListSearch.do',
        type : 'POST',
        data : $("#form_Search").serialize(),
        success : function(obg) {
        console.log(obj);
        var data = JSON.parse(obj);
        console.log(data.boardList); //배열로 가져옴
        var htmlString = "";
        htmlString += "<tr>";
        htmlString += '		<th bgcolor="orange" width="100"><spring:message code="message.board.list.table.head.seq"/></th>		';
        htmlString += '		<th bgcolor="orange" width="200"><spring:message code="message.board.list.table.head.title"/></th>		';
        htmlString += '		<th bgcolor="orange" width="150"><spring:message code="message.board.list.table.head.writer"/></th>		';
        htmlString += '		<th bgcolor="orange" width="150"><spring:message code="message.board.list.table.head.regDate"/></th>	';
        htmlString += '		<th bgcolor="orange" width="100"><spring:message code="message.board.list.table.head.cnt"/></th>		';
        htmlString += "</tr>"
        for(var i = 0; i < data.boardList.length; i++) {
          htmlString += "<tr>";
          htmlString += "	<td>" + data.boardList[i].seq + "</td>"; 
          htmlString += "	<td>";
          htmlString += "		<a href='getBoard.do?seq=" + data.boardList[i].seq + "'>" + data.boardList[i].title + "</a>"; 
          htmlString += "	</td>"; 
          htmlString += "	<td>" + data.boardList[i].writer + "</td>"; 
          htmlString += "	<td>" + data.boardList[i].regDate + "</td>"; 
          htmlString += "	<td>" + data.boardList[i].cnt + "</td>"; 
          htmlString += "</tr>";	
        }

        $("#tblresult").html(htmlString);
        },
        error : function(e) {
        console.log(e);
        }
      });
    });
  });
</script>

7. 날짜 형식 설정 및 실행 결과

@JsonFormat(shape=JsonFormat.Shape.STRING, pattern="yyyy-MM-dd")
private Date regDate;

8. 한글 인코딩

@RequestMapping(value="/getBoardListSearch.do", produces = "application/text; charset=utf8")
@ResponseBody
public String getBoardListSearch(BoardVO vo) throws JsonProcessingException, UnsupportedEncodingException  {
	System.out.println("글 목록 검색 처리");
    
    ...
}

저작자표시 비영리 변경금지

'👨‍💻 2. 웹개발_Back end > 2-6 Spring' 카테고리의 다른 글

[Spring] 9장 스프링 게시판 만들기 - 첨부 파일 업로드, 수정, 삭제, 다운로드 (0)	2021.11.04
[Spring] 8장 스프링 게시판 만들기 - 페이징(Paging) 처리하기 (2)	2021.11.04
[Spring] 6장 스프링과 JPA 연동 - 엔티티 매핑 설정 및 스프링과 JPA 연동 설정 (0)	2021.11.02
[Spring] 5장 JPA 환경설정 - 영속성 유닛 설정과 엔티티 클래스 기본 매핑 및 JPA API (0)	2021.11.02
[Spring] 4장 JPA 개념 - JPA 특징과 프로젝트 생성 및 라이브러리 내려받기 (0)	2021.11.02