REST AJAX 댓글 등록 처리

우선 댓글 등록 컨트롤러 구현 부에 대해 살펴보겠습니다.

 

package org.zerock.controller;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.HttpStatus;
import org.springframework.http.MediaType;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.DeleteMapping;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RestController;
import org.zerock.domain.Criteria;
import org.zerock.domain.ReplyVO;
import org.zerock.service.ReplyService;

import lombok.Setter;
import lombok.extern.log4j.Log4j;
//보통 ajax시 사용
@RequestMapping("/replies/")
@RestController
@Log4j
public class ReplyController {
	//REST방식 처리 댓글
	@Setter(onMethod_=@Autowired)
	private ReplyService service;
	
	//consumes와 produces를 통해 JSON 방식의 데이터만 처리하도록 
	@PostMapping(value="/new",consumes="application/json",produces= {MediaType.TEXT_PLAIN_VALUE})
	public ResponseEntity<String> create(@RequestBody ReplyVO vo){ //@RequestBody는 JSON 타입을 ReplyVO 타입으로 전환하게 만듬
		log.info("ReplyVO: "+vo);
		int insertCount=service.register(vo);
		log.info("REply INSERT COUNT: "+insertCount);
		
		return insertCount==1? new ResponseEntity<>("success",HttpStatus.OK): new ResponseEntity<>(HttpStatus.INTERNAL_SERVER_ERROR);
		
	}
    .
    .
    .수정 등등...

}

 

우선 /replies/new 라는 경로로 댓글이 등록될 경우 REST방식이고 POST 방식입니다.

 

consumes을 통해 json형식을 사용하고 produces로 최종 결과는 텍스트라는 뜻입니다.

 

@RequestBody를 통해서 JSON 타입을 ReplyVO 타입으로 바꿔서 처리한다는 뜻입니다.

 

서비스 구현부의 등록 메서드를 통해 댓글을 등록하게 됩니다.  성공 시 success라는 문자열을 return 합니다.

 

이제 이 컨트롤러를 통한 AJAX를 처리 하기위해 자바스크립트 처리를 해야합니다.

 

우선 댓글 모듈로 자바스크립트를 작성합니다.

 

console.log("Reply Module......");

var replyService=(function(){
	
	function add(reply,callback,error){
		console.log("reply........");
	
	$.ajax({
		type:'post',
		url: '/replies/new',
		data: JSON.stringify(reply),
		contentType: "application/json; charset=utf-8",
		success: function(result,status,xhr){
			if(callback){
				callback(result);
			}
		},
		error : function(xhr,status,er){
			if(error){
				error(er);
			}
		}
	})
	}
	return {add:add};
})();

댓글 등록 자바스크립트 함수 add를 통해 파라미터로 reply, callback, error를 넣어줍니다.

 

jsp파일에서 이 자바스크립트 함수를 이용할 때 reply에 JSON형 식으로 넣어줍니다.

 

예는 아래에서 설명하도록 합니다.

 

callback은 호출 시 function이 있으면 이를 불러 결과 result를 넣어줍니다. 즉 success가 되겠죠...

 

ajax 구현 부를 보면

 

url이 아까 위 컨트롤러 post 처리 URL 입니다. 즉 /replies/new입니다.

 

가서 처리하고 성공 시 result로 반환이 되는거죠 result는 success입니다.

 

return {add:add}를 통해 replyService 객체에는 이 add라는 메서드가 존재합니다.

 

이를 jsp파일에서 써야합니다.

 

즉 게시글 조회 페이지에서 댓글을 등록하기 때문에 이 자바스크립트 모듈화 파일을 불러옵니다.

 

<script type="text/javascript" src="/resources/js/reply.js"></script>

그리고 자바스크립트 구현 부는

<script type="text/javascript">
console.log("============");
console.log("JS TEST");

var bnoValue='<c:out value="${board.bno}"/>';

//for Reply add test
replyService.add({reply:"JS Test",replyer:"tester",bno:bnoValue},
		function(result){
			alert("RESULT: "+result); //success가 뜰 것임.
		}
);

우선 해당 게시글 번호를 bnoValue에 넣어주고 add 메서드를 호출 합니다. 

 

reply에 json 형식으로 넣어줍니다. 그리고 callback 함수 로 alert를 띄우게 됩니다.