게시글 작성하기(SpringMVC02(Ajax + JSON))

<board.js>

	   function goList(cpath){
			   location.href = cpath + "/boardList.do"
		   }
	
		   function goUpdate(cpath, idx){
			   location.href = cpath + '/boardUpdate.do?idx='+idx
		   }
	
	
		   function goDelete(cpath, idx){
  		    // 삭제시켜 줄 컨트롤러로 이동
  		    // 삭제 후 boardList.jsp 로
  		    
  		    // url/value1/value2/.....
      			location.href =cpath+'/boardDelete.do/'+idx;
		   }
		   
		   	function loadBoard(){
			// ajax를 이용해서 게시물 목록 가져오기
			$.ajax({
				url : 'boardList.do', // 요청할 주소
				type : 'post', // get? post?
				data : {
					// 'name' : value
				},		
				// dataType : 'json', // 응답받는 데이터가 어떤 형식인지
				success : makeTable, // 요청이 성공했을 때, 실행되는 콜백함수
				error : function(){ alert('error')  } // 요청이 실패했을 때, 실행되는 콜백함수		
			});
		}
		
		function makeTable(res){
		
			// res --> 서버로부터 받는 응답
			console.log(res);
			// 받아온 데이터 이용, 테이블 생성
			
			// tbody 초기화
			$('#tbody').html("");
			
			for(let i = 0; i< res.length; i++){
				board = res[i]
				// ` : 백틱 : 개행을 해도 되는 문자열
				// 			백틱 내에서 ${} 를 통해 문자열 사이에 변수값을 집어넣을 수 있다.
				//			단, jsp에서는 사용불가
					tr = `
					<tr>
						<td>${board.idx}</td>
						<td onclick="viewBoard(${board.idx})"><a>${board.title}</a></td>
						<td>${board.writer}</td>
						<td>${board.indate}</td>
						<td>${board.count}</td>
					</tr>
					<tr id="tr${board.idx}" style="display : none;">
						<td>내용</td>
						<td colspan="4">
							<textarea id="con${board.idx}" row="5" class="form-control">${board.content}</textarea>
							<br>
							<button onclick="update(${board.idx})" class="btn btn-sm btn-info">수정</button>
							
						</td>
					</tr>
					`;
					
					// $('선택자').html('코드') : 안에 있는 코드 덮어쓰기
					// $('선택자').after('코드') : 닫는 태그 바로 뒤에 추가
					// $('선택자').before('코드') : 여는 태그 바로 앞에 추가
					// $('선택자').append('코드') : 안에 추가
					$('#tbody').append(tr);
			}
			
		}
		
		function viewBoard(idx){
			//$('tr'+idx) --> 아래와 똑같음
			// .css('속성명') : 해당하는 css 옵션의 값을 리턴
			// .css('속성명', '속성값') : 해당하는 css옵션의 값을 변경
			if($(`#tr${idx}`).css('display') == "none" ){
				// 보여주기
				$(`#tr${idx}`).css('display', 'table-row');
			}else{
				// 숨겨주기
				$(`#tr${idx}`).css('display', 'none');
			}
		
		}
		
		 function update(idx){
         // textarea 글자 가져오기
		 // $('선택자').val()
         let content = $('#con'+idx).val();
         
         // ajax 요청 통해서 글 내용 업데이트
         $.ajax({
        	 
            url : 'boardUpdate.do', 
            type : 'post', 
            data : {'idx' : idx, 'content' : content}, // name값에 '' 붙여주기.
            success : loadBoard, 
            error : function(){alert('error')} 
         });
         
      }
		 
		 function openwForm(){
			 
			 if($('#wForm').css('display') == "none"){
				 $('#wForm').css('display', 'block');
			 }else{
				 $('#wForm').css('display', 'none')
			 }
			 
		 }
      
		 function boardWrite(){
			 
			 // 1. 제목, 작성자, 내용 가져오기
			 // $('태그이름[속성명=속성값]')			 
			 // $('input[name=title]')
			 let title = $('input[name=title]').val();
			 let writer = $('input[name=writer]').val();
			 let content = $('textarea[name=content]').val();
			 
			 
			 // ajax 이용 게시글 저장
			 $.ajax({
				 url : 'boardInsert.do',
				type : 'post',
				data : {
					// key(name) : value
					// Board의 필드명 == key(name)
					'title' : title, 'writer' : writer, 'content' : content},
				// 응답받는 데이터의 형식
				// dataType : 'json', // json 데이터를 받을때만 사용
			 	success : function(res){location.reload();},
			 	error : function(){alert('error!')}
			 });
			 
			
		 }

<BoardRestController.java>

package com.smhrd.web;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;

import com.smhrd.domain.Board;
import com.smhrd.mapper.BoardMapper;

@RestController 
public class BoardRestController {
	
	// Ajax랑 통신해서, 요청을 처리하고, 데이터를 응답해주는 경우
	// @ResponseBody를 적지 않아도, 페이지이동 대신 데이터를 리턴할 수 있게 해줌
	
	@Autowired
	BoardMapper mapper;
	
	
	
	@RequestMapping("/boardList.do")
	public List<Board> boardList() {
		// 일반적인 Controller를 만들면 forward이동
		// 리턴타입에 @ResponseBody를 붙여주면 된다.
		
		// DB에서 게시글 목록
		List<Board> list = mapper.boardList();
		
		// ajax에서 사용하는 데이터 포맷(xml, csv, json)
		// xml : html처럼 태그와 속성을 이용해서 데이터를 저장 but 용량 너무 큼
		// csv : comma로만 데이터 구분, 용량이  작다. but 가독성이 안좋음
		// json : javascript의 객체 형식으로 데이터 저장, java/ python / javascript에서 쉽게 사용가능
		

		
		// jsp/Servlet에서의 응답 --> out.print("응답할 내용");
		// Spring에서의 응답 --> return한 내용
		
		// jackson databind 라이브러리
		// 전달하고 싶은 객체를 리턴 --> JSON으로 변환 
		return list;
	}
		
	    @RequestMapping("/boardUpdate.do")
	    public String boardUpdate(Board vo) {
	    	// 데이터 받기
	    	// Ajax로부터 데이터를 받거나, ajax에게 돌려줄때는 UTF-8 방식으로만 인코딩 가능
	   
	    	// mapper 이용 내용만 업데이트
	       mapper.ContentUpdate(vo);
	       
	       // ajax한테 응답해주기
	       return "내용 수정";
			
	}
	
	    @RequestMapping("/boardInsert.do")
	    public void boardInsert(Board vo) {
	    	
	    	// Ajax로부터 제목, 작성자, 내용을 받아서
	    	
	    	// DB에 insert 시키는 기능
	    	mapper.boardInsert(vo);
	    }

}