ajax로 받아온 data 페이지 새로고침 없이 사용하기

게시판을 구현하하면서 페이지 새로고침 없이 ajax의 GET메서드를 통해 새로운 데이터를 가져오고싶었다.

• 게시판 인기순, 최신순 정렬하는 경우
• 댓글 입력, 삭제 후 리스트 업데이트 & 댓글 개수 업데이트 하는 경우

append를 사용해 이어붙히자니 코드가 너무 지저분해지는것 같아 다른 방법을 찾아보았다.

https://backstreet-programmer.tistory.com/105
위 블로그를 참고했다.

요청 흐름

쉽게 설명하기위해 이름을 정하겠음
(A) : controller로 리스트를 요청 할 jsp
(B) : 리스트를 가져와 뿌려줄 controller
(C) : controller에서 리스트를 전달할 jsp

---

• 먼저 A에서 댓글 onclick으로 insertReplyFunc()를 실행시킨다.

<button type="button" class="btn btn-dark btn-block" onclick="insertReplyFunc();">댓글 등록</button

• insertReplyFunc() 실행

// 댓글 등록
function insertReplyFunc(){

	// 댓글 등록시 필요한 정보들 생략
   	// data["name"]=value (json) 형식으로 정보 저장
    
	$.ajax({
		type : "post",
		url : "reply",
		data : JSON.stringify(data),
	    dataType: "json",
	    contentType:"application/json;charset=UTF-8",
		async : false,
		success : function(data) {
			
			if (data.result == "ok") {
				// 리스트 업데이트하는 getList()를 실행시킨다.
				getList();
			}

		},
		error : function(){
               alert("통신실패");
           }
	});

}

• B 에서 DB에 댓글 저장하고 응답

@ResponseBody
	@PostMapping("/reply")
	public Map insertReply(@RequestBody String str) {

		// json 파싱 후 반환
		JSONObject obj = jsonService.jsonDc(str);
		// 파싱한 데이터 생략

		// 댓글 등록
		replyService.insertReply(replyContents, userIdx, boardIdx, replySecret, replyRecipient);

		// 댓글 개수 플러스
		replyService.updateReplyPlus(boardIdx);

		Map<String, Object> map = new HashMap<String, Object>();
		map.put("result", "ok");

		return map;
	}

• getList() 실행

function getList(){
	var formData = new FormData();
	$.ajax({
		type : "get",
		url : "reply?boardIdx=${boardInfo.boardIdx}&writer=${boardInfo.userIdx}",
			dataType : "text",
			data : formData, 
			contentType: false, 
			processData: false, 
			cache : false,
			success : function(data) {
           		 // C에서 받아온 데이터로 새로 뿌려주기
				var html = jQuery('<div>').html(data);
				var contents1 = html.find("div#replyList").html();
				var contents2 = html.find("div#replyCount").html();
				$("#replyList").html(contents1);
				$("#replyCount").html(contents2);
			},
			error : function(){
                alert("통신실패");
            }
		});
	}

• B 에서 C로 리스트,데이터 전달

@GetMapping("/reply")
	public String mainSort(HttpSession session, Model model, @RequestParam int boardIdx, @RequestParam int writer) {

		int userIdx = Integer.parseInt(session.getAttribute("userIdx").toString());

		BoardVO bvo = boardService.selectOneInfo(boardIdx);

		// 댓글 리스트
		List<ReplyVO> list = replyService.selectReply(boardIdx, userIdx);
		model.addAttribute("list", list);

		model.addAttribute("list", list);
		model.addAttribute("boardInfo", bvo);

		return "replyListAjax";
	}

• B에서 받은 list,data를 받은

	<div id="replyCount">
		<p style="font-size: 18px;"><b>댓글  ${boardInfo.boardReply}개 </b></p>
	</div>
	<div id="replyList">
		<ul class="list-group">
		  	<c:forEach var="item" items="${list}">
				... 생략 ....
	</div>