Java/Spring
[Spring] 게시판 글쓰기(jquery+ajax)
퓨어맨
2022. 7. 20. 17:19
<%@ 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('실패!');
}
})
}
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();
}
</script>
</body>
</html>
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.ui.Model;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import kr.smhrd.mapper.BoardMapper;
import kr.smhrd.model.BoardVO;
@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();
// List --- GSON ---> JSON
// List --- jackson ---> JSON
// 스프링 프레임워크는 jackson 라이브러리를 로드해주기만 하면
// 자동으로 json 구조로 변환 시켜준다.
return list;
}
@RequestMapping("/boardInsert.do")
public @ResponseBody void boardInsertAjax(BoardVO vo) {
mapper.boardInsert(vo);
}
}
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);
}
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="kr.smhrd.mapper.BoardMapper">
<select id="boardList" resultType="kr.smhrd.model.BoardVO">
select *
from board
</select>
<insert id="boardInsert" parameterType="kr.smhrd.model.BoardVO">
insert into board(title,writer,contents)
values(
#{title},
#{writer},
#{contents}
)
</insert>
</mapper>
