게시판 글 수정 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')} 
         });
         
      }

<BoardController.java>

package com.smhrd.web;

import java.util.ArrayList;
import java.util.List;

import javax.servlet.http.HttpServletRequest;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
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.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;

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

// 어노테이션
// POJO임을 명시
@Controller
public class BoardController {
	
	
	@Autowired // self service
	BoardMapper mapper;
	
	@RequestMapping("/")
	public String base() {
		return "base";
	}
	
	@RequestMapping("/boardList.do")
	public @ResponseBody 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 @ResponseBody String boardUpdate(Board vo) {
	    	// 데이터 받기
	    	// Ajax로부터 데이터를 받거나, ajax에게 돌려줄때는 UTF-8 방식으로만 인코딩 가능
	   
	    	// mapper 이용 내용만 업데이트
	       mapper.ContentUpdate(vo);
	       
	       // ajax한테 응답해주기
	       return "내용 수정";
			
	}
	
	
}

<BoardMapper.java>

package com.smhrd.mapper;

import java.util.List;

import org.apache.ibatis.annotations.Update;

import com.smhrd.domain.Board;

// DAO를 interface로 만든다
public interface BoardMapper {
	
	// ********** 연결된 xml파일이랑 이름이 같아야함
	
	// DB 연결은 다른 파일에서 진행
		
	// 추상메서드
	// Spring에서 쓸때는 추상메서드만 만들고, mapper.xml이랑 맵핑
	// 메서드 이름 <--> xml의 id mapping
	public List<Board> boardList();
	
	// resultType ==> 리턴타입
	// parameterType ==> 매개변수
	public int boardInsert(Board vo);
	
	public Board boardContent(int idx);
	
	public int boardDelete(int idx);
	
	public int boardUpdate(Board vo);
	
	public int boardCount(int idx);
	
	// 어노테이션을 이용해서  sql문 맵핑
	// Mapper.xml 동시에 맵핑 불가능
	@Update("update board set content=#{content} where idx = #{idx}")
	public int ContentUpdate(Board vo);
	

}