<!-- jackson-databind : ajax로 요청이 들어온 데이터에 대해 응답을 해줄때 json 구조로 변환시켜주는 역할 -->
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.13.1</version>
</dependency>
<%@ 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" class="write">
<button onclick="" class = "btn btn-primary btn-sm">글쓰기</button>
</td>
</tr>
</table>
</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('실패!');
}
})
}
</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;
}
}
// 3. 화면에 보여주는 함수 생성
function listView(data){
console.log(data)
// 내가 화면에 출력해줄 tr 태그들의 모음
var blist = "";
// for-each문을 사용하는 방법
// $.each(어떤 데이터를 가지고 반복, 어떤 함수로 처리해줄건지)
$.each(data,function(index,board){
// function(인덱스번호,data안에 들어있는 각각의 값들을 어떤 변수로 받아줄 건지)
blist += "<tr>"
blist += "<td>"+board.idx+"</td>"
blist += "<td>"+board.title+"</td>"
blist += "<td>"+board.writer+"</td>"
blist += "<td>"+board.indate+"</td>"
blist += "<td><button class = 'btn-sm btn-warning btn'>삭제</button></td>"
blist += "</tr>"
})
// heading이라는 class 명을 가진 tr태그 다음에 blist를 추가하기!
$('.heading').after(blist);
}
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();
}
