[Spring] 게시판 글 삭제(jquery+ajax)

Java/Spring

[Spring] 게시판 글 삭제(jquery+ajax)

퓨어맨 2022. 7. 20. 17:25

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!-- 프로젝트의 contextpath값을 동적으로 가져오는 방법 -->
<c:set var= "cpath" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html>
<html>
<head>
<!-- bootstrap 사용하기 위해 필요한 라이브러리 3개! -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

	<div class = "container">
		<h2>jQuery+ajax활용하기</h2>
		<div class="panel panel-default">
		  <div class="panel-heading">SpringMVC02 게시판</div>
		  <div class="panel-body">
		  	<table class = "table table-bordered table-hover">
		  		<tr class = "heading">
		  			<td>번호</td>
		  			<td>제목</td>
		  			<td>작성자</td>
		  			<td>작성일</td>
		  			<td>삭제</td>
		  		</tr>
		  		
		  		<tr>
		  			<td colspan = "5">
		  				<button onclick="goInsert()" class = "btn btn-primary btn-sm">글쓰기</button>
		  			</td>
		  		</tr>
		   </table>
		   
		   		<div id="insertview" style="display:none">
	  				<form id="frm">
					  <div class="form-group">
					    <label for="title">제목:</label>
					    <input type="text" class="form-control" name="title" id="title">
					  </div>
					  <div class="form-group">
					    <label for="writer">작성자:</label>
					    <input type="text" class="form-control" name="writer" id="writer">
					  </div>
					  <div class="form-group">
					    <label for="contents">내용:</label>
					    <textarea rows = "10" class="form-control" name="contents" id="contents"></textarea>
					  </div>
					  <button type="button" onclick="boardInsert()" class="btn btn-primary btn-sm">글쓰기</button>
					  <button type="reset" class="btn btn-warning btn-sm close2">닫기</button>
					</form>
		  		</div>	
		  	</div>
		</div>
	</div>

<script type="text/javascript">
	// 1. 해당하는 페이지에 접속하자마자 서버에 데이터를 요청하는 ajax 함수를 실행
	$(document).ready(function(){
		loadList(); // () 쓰면 호출, 안쓰면 참조
	})
	
	// 2. 서버에 요청하는 ajax 함수를 생성
	function loadList(){
		$.ajax({
			// 서버 url
			url : '${cpath}/boardListAjax.do',
			// 요청 방식
			type : 'get',
			// 받아올 데이터 타입 지정
			dataType : 'json',
			// 성공했을 때 실행할 함수
			success : listView,
			// 실패했을 때 실행할 함수
			error : function(){
				alert('실패!');
			}	
		})
	}

	// 3. 화면에 보여주는 함수 생성
	function listView(data){
		
		console.log(data)
		// 내가 화면에 출력해줄 tr 태그들의 모음
		var blist = "";
		
		// for-each문을 사용하는 방법
		// $.each(어떤 데이터를 가지고 반복, 어떤 함수로 처리해줄건지)
		$.each(data,function(index,board){
			// function(인덱스번호,data안에 들어있는 각각의 값들을 어떤 변수로 받아줄 건지)
			blist += "<tr class = 'innerContent'>"
			blist += "<td>"+board.idx+"</td>"
			blist += "<td>"+board.title+"</td>"
			blist += "<td>"+board.writer+"</td>"
			blist += "<td>"+board.indate+"</td>"
			blist += "<td><button onclick = 'boardDelete("+board.idx+")' class = 'btn-sm btn-warning btn'>삭제</button></td>"
			blist += "</tr>"
		})
		
		// heading이라는 class 명을 가진 tr태그 다음에 blist를 추가하기!
		$('.innerContent').remove();
		$('.heading').after(blist);
		
	}

	function goInsert(){
		
		if($('#insertview').css('display') == 'none'){
			// $('#insertview').css('display','block');
			$('#insertview').slideDown();
		}else{
			//$('#insertview').css('display','none');
			$('#insertview').slideUp();
		}
		
	}
	
	function boardInsert(){
		// form 태그 안에 있는 input, textarea등에 name값이 달려있는 태그들의 값을 가져와서
		// 직렬화시키는 함수
		var formdata = $('#frm').serialize();
		
		$.ajax({
			// 서버 url
			url : '${cpath}/boardInsert.do',
			// 요청 방식
			type : 'post',
			// 데이터 전송
			data : formdata,
			// 성공했을 때 실행할 함수
			success : loadList,
			// 실패했을 때 실행할 함수
			error : function(){
				alert('실패!');
			}
		})
		
		// 초기화 버튼을 한번 클릭!
		$('.close2').trigger('click');
		
		// insertview div태그를 다시 접어주기
		$('#insertview').slideUp();
		
	}
	
	function boardDelete(idx){
		
		$.ajax({
			// 서버 url
			url : '${cpath}/boardDelete.do',
			// 요청 방식
			type : 'get',
			// 데이터 전송
			data : {'idx':idx},
			// 성공했을 때 실행할 함수
			success : loadList,
			// 실패했을 때 실행할 함수
			error : function(){
				alert('실패!');
			}
		})
	}

package kr.smhrd.web;

import java.util.List;

import javax.servlet.http.HttpServletRequest;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import kr.smhrd.service.BoardService;

@Controller 
public class BoardController {
	
	@Autowired // DI
	private BoardMapper mapper;
	
	@RequestMapping("/")
	public String basic() {
		return "basic"; 
	}
	
	@RequestMapping("/boardListAjax.do")
	public @ResponseBody List<BoardVO> boardListAjax(Model model) {
		// @ResponseBody
		// : 응답에 대한 제어권이 client에게 전부 되돌아간다.
		// : !!!! converter가 로드가 되어있지 않으면 작동 불가능 !!!
		
		List<BoardVO> list = mapper.boardList(model);
		// List --- GSON ---> JSON
		// List --- jackson ---> JSON
		// 스프링 프레임워크는 jackson 라이브러리를 로드해주기만 하면
		// 자동으로 json 구조로 변환 시켜준다.
		
		return list;
	}
	
	@RequestMapping("/boardInsert.do")
	public @ResponseBody void boardInsertAjax(BoardVO vo) {
		mapper.boardInsert(vo);
	}
	
	@RequestMapping("/boardDelete.do")
	public @ResponseBody void boardDeleteAjax(int idx) {
		mapper.boardDeleteAjax(idx);
	}
}

package kr.smhrd.mapper;

import java.util.List;

import org.apache.ibatis.annotations.Delete;
import org.apache.ibatis.annotations.Select;
import org.apache.ibatis.annotations.Update;

import kr.smhrd.model.BoardVO;

public interface BoardMapper {
		
	public List<BoardVO> boardList();
	
	public void boardInsert(BoardVO vo);
	
	@Delete("delete from board where idx=#{idx}")
	public void boardDelete(int idx);
}