👩🏫 Study/스프링레거시 강의
Ajax와 jQuery를 이용한 스프링 게시판 만들기
개발진스
2023. 10. 19. 02:05
728x90
1. Controller의 리턴타입
- String : jsp를 이용하는 경우에는 jsp파일의 경로와 파일이름을 나타내기 위해서 사용
- void : 호출하는 URL과 동일한 이름의 jsp를 의미
- VO, DTO 타입 : 주로 JSON타입의 데이터를 만들어서 반환하는 용도
- ResponseEntity 타입 : response할 때 Http헤더정보와 내용을 가공하는 용도
이전 글에서는 String과 void를 이용해서 뷰를 보여주는 작업을 했었다.
이번엔 JSON타입으로 응답을 해보자.
// @ResponseBody -> jackson-databind(객체를 -> json 데이터 포멧으로 변환)
@RequestMapping("/boardList.do")
public @ResponseBody List<Board> boardList(){
List<Board> list = boardMapper.getLists();
return list; // JSON 데이터 형식으로 변환(API)해서 리턴(응답)하겠다
}@ResponseBody를 사용하면 객체가 json형태로 변환이 된다.
2. JSON(JavaScript Object Notation) 이란?
JSON은 가벼운 데이터 교환 형식이다.
왜 JSON타입으로 변환해서 전송을 할까?
요즘 개발 환경은 웹과 안드로이드 IOS등 다양한 클라이언트가 존재한다. 서버는 브라우저나 모바일에서 필요한 순수한 데이터만을 전달하는 API 서버의 형태로 변화 서버는 클라이언트의 요청 결과를 XML이나 JSON의 형태로 전달하고, 브라우저나 모바일에서는 이를 가공해서 사용자에게 보여주는 방식을 많이 사용한다.
이러한 방식을 REST방식이라고 한다.
기존의 웹페이지 동작 방식은 요청을 받으면 요청을 처리하고 HTML을 생성했다.
페이지가 두가지가 필요한 동작 방식이다.
Ajax 웹페이지 동작 방식은 한개의 페이지에서 서버에 요청을 보내면 JSON데이터를 클라이언트에서 원하는 뷰를 만들어서 출력한다.
그러려면 JSON포맷으로 응답을 해줘야한다.
main.jsp 상단에 스크립트를 작성해보자
<script type="text/javascript">
$(document).ready(function(){
loadList();
});
function loadList(){
// 서버와 통신 : 게시판 리스트 가져오기
$.ajax({
url : "boardList.do",
type : "get",
dataType : "json",
success : makeView,
error : function(){ alert("error"); }
});
}
function makeView(data){
alert(data);
}
</script>
loadList()로 게시판 리스트를 가져오는 ajax를 작성한다
성공하면(success) makeView로 넘어가게 되는데 data는 return 되는 값인 list 데이터가 담긴다.
그럼 이제 받아온 데이터 list들을 화면에 출력하는 makeView()를 작성해보자.
function makeView(data){ // data =[{ }, { }, { }, ...]
var listHtml="<table class='table table-bordered'>";
listHtml+="<tr>";
listHtml+="<td>번호</td>";
listHtml+="<td>제목</td>";
listHtml+="<td>작성자</td>";
listHtml+="<td>작성일</td>";
listHtml+="<td>조회수</td>";
listHtml+="</tr>";
$.each(data, function(index, obj){ // 앞에는 인덱스를 받고, 뒤에는 데이터를 받는다
listHtml+="<tr>";
listHtml+="<td>"+obj.idx+"</td>";
listHtml+="<td>"+obj.title+"</td>";
listHtml+="<td>"+obj.writer+"</td>";
listHtml+="<td>"+obj.indate+"</td>";
listHtml+="<td>"+obj.count+"</td>";
listHtml+="</tr>";
});
listHtml+="</table>";
$("#view").html(listHtml);
}이렇게 작성한 makeView를 화면에 출력하기 위해서는 html에서 id값을 지정해줘야한다.
<div class="panel-body" id="view"> </div>
작성한 내용이 잘 확인이 되는걸 볼 수 있다.
이러한 방식을 비 동기식처리 방법이라고 한다.
3. 동기식 처리방법과 비동기식 처리방법
하나의 뷰 페이지에서(JSP) 여러가지 처리를 해야 되는 경우에 어떻게 2가지 일을 처리 할까?
예를 들어서 지도를 출력하는 일, 게시판 리스트를 출력하는 일을 동시에 하는 방법을 생각해보자.
동기식 처리 방법은 지도를 출력하는 일이 끝나면 게시판 리스트를 출력하는 일을 진행한다. 그렇기 때문에 응답시간이 길어질수 있고, 화면이 바뀐다.
비동기식 처리 방법은 1번에서는 지도를 출력하고 2번에서는 게시판 리스트를 가져와서 출력하는 일을 한다. 이렇게 2번이 생성되어서 작업을 하는걸 콜백함수라고 한다.
CallBack함수
콜백함수는 클라이언트가 서버로 요청 후 서버에서 응답하는 데이터를 클라이언트에서 받아서 처리하는 함수이다.
클라이언트에서는 JavaScript(자바스크립트)에서 처리한다.
Ajax 웹 페이지 동작 방식
Ajax(Asynchronous JavaScript and XML) : 웹에서 화면을 갱신하지 않고 Server로 부터 Data를 가져와서 동적으로 뷰를 만들 수 있는 방법
$.ajax(
type : “post” or “get”,
url : “요청할 URL”,
data : { 서버로 전송할 데이터},
dataType : “서버에서 전송받을 데이터형식”,
success : function(서버로부터 데이터 받기){ // 정상 요청, 응답시 처리 },
error : function(오류정보){ // 오류 발생시 처리 }
);
4. 글쓰기 실습
<script type="text/javascript">
$(document).ready(function(){
loadList();
});
function loadList(){
// 서버와 통신 : 게시판 리스트 가져오기
$.ajax({
url : "boardList.do",
type : "get",
dataType : "json",
success : makeView,
error : function(){ alert("error"); }
});
} // 0 1 2 --->
function makeView(data){ // data =[{ }, { }, { }, ...]
var listHtml="<table class='table table-bordered'>";
listHtml+="<tr>";
listHtml+="<td>번호</td>";
listHtml+="<td>제목</td>";
listHtml+="<td>작성자</td>";
listHtml+="<td>작성일</td>";
listHtml+="<td>조회수</td>";
listHtml+="</tr>";
$.each(data, function(index, obj){ // 앞에는 인덱스를 받고, 뒤에는 데이터를 받는다
listHtml+="<tr>";
listHtml+="<td>"+obj.idx+"</td>";
listHtml+="<td>"+obj.title+"</td>";
listHtml+="<td>"+obj.writer+"</td>";
listHtml+="<td>"+obj.indate+"</td>";
listHtml+="<td>"+obj.count+"</td>";
listHtml+="</tr>";
});
listHtml+="<tr>";
listHtml+="<td colspan='5'>";
listHtml+="<button class='btn btn-primary btn-sm' onclick='goForm()'>글쓰기</button>";
listHtml+="</td>";
listHtml+="</tr>";
listHtml+="</table>";
$("#view").html(listHtml);
$("#view").css("display", "block");
$("#wfrom").css("display", "none");
}
function goForm(){
$("#view").css("display", "none");
$("#wfrom").css("display", "block");
}
function goList(){
$("#view").css("display", "block");
$("#wfrom").css("display", "none");
}
function goInsert(){
/*
var title = $("#title").val();
var content = $("#content").val();
var writer = $("#writer").val();
*/
var fData=$("#frm").serialize(); // serialize(): 모든 데이터를 한번에 가져올때 사용
$.ajax({
url : "boardInsert.do",
type: "post",
data: fData,
success: loadList,
error : function() { alert("error")}
});
}
</script>
</head>
<body>
<div class="container">
<h2>Spring MVC02</h2>
<div class="panel panel-default">
<div class="panel-heading">Board</div>
<div class="panel-body" id="view">List</div>
<div class="panel-body" id="wfrom" style="display:none">
<form id="frm">
<table class="table">
<tr>
<td>제목</td>
<td><input type="text" name="title" id="title" class="form-control"/></td>
</tr>
<tr>
<td>내용</td>
<td><textarea rows="7" name="content" id="content" class="form-control"></textarea></td>
</tr>
<tr>
<td>작성자</td>
<td><input type="text" name="writer" id="writer" class="form-control"/></td>
</tr>
<tr>
<td colspan="2" align="center">
<button type="submit" class="btn btn-success btn-sm" onclick="goInsert()">등록</button>
<button type="reset" class="btn btn-warning btn-sm">취소</button>
<button type="button" class="btn btn-info btn-sm" onclick="goList()">리스트</button>
</td>
</tr>
</table>
</form>
</div>
</div>
</div>
</body>
</html>글쓰기 버튼을 누르면 goInsert()함수가 실행이 된다.
함수는 ajax를 통해서 controller에 데이터를 보내는데 serialize를 사용하면 모든 데이터를 한번에 보낼 수 있다.
BoardController.java
@RequestMapping("/boardInsert.do")
public @ResponseBody void boardInsert(Board vo) {
boardMapper.boardInsert(vo);
}
boardInsert는 return이 필요 없다. success시 loadList를 불러오기 했기 때문에 따로 return할 필요가 없다
5. 글 상세보기 실습
function makeView(data){ // data =[{ }, { }, { }, ...]
var listHtml="<table class='table table-bordered'>";
listHtml+="<tr>";
listHtml+="<td>번호</td>";
listHtml+="<td>제목</td>";
listHtml+="<td>작성자</td>";
listHtml+="<td>작성일</td>";
listHtml+="<td>조회수</td>";
listHtml+="</tr>";
$.each(data, function(index, obj){ // 앞에는 인덱스를 받고, 뒤에는 데이터를 받는다
listHtml+="<tr>";
listHtml+="<td>"+obj.idx+"</td>";
listHtml+="<td><a href='javascript:goContent("+obj.idx+")'>"+obj.title+"</a></td>";
listHtml+="<td>"+obj.writer+"</td>";
listHtml+="<td>"+obj.indate+"</td>";
listHtml+="<td>"+obj.count+"</td>";
listHtml+="<span>";
listHtml+="</tr>";
listHtml+="<tr id='c"+obj.idx+"' style='display:none'>";
listHtml+="<td>내용</td>";
listHtml+="<td colspan='4'>";
listHtml+="<textarea rows='7' class='form-control' readonly>"+obj.content+"</textarea>";
listHtml+="<br/>"
listHtml+="<button class='btn btn-success btn-sm'>수정화면</button> "
listHtml+="<button class='btn btn-warning btn-sm' onclick='goDelete("+obj.idx+")'>삭제</button>"
listHtml+="</td>";
listHtml+="</tr>";
});
listHtml+="<tr>";
listHtml+="<td colspan='5'>";
listHtml+="<button class='btn btn-primary btn-sm' onclick='goForm()'>글쓰기</button>";
listHtml+="</td>";
listHtml+="</tr>";
listHtml+="</table>";
$("#view").html(listHtml);
$("#view").css("display", "block");
$("#wfrom").css("display", "none");
}리스트 쪽에서 제목을 클릭하면 글 내용이 나오게 한다. 그리고 다시 클릭하면 글내용이 닫히도록 구현해보는 함수를 goContent로 작성했다
function goContent(idx){
if($("#c"+idx).css("display")=="none") {
$("#c"+idx).css("display","table-row"); //보이게
} else {
$("#c"+idx).css("display","none"); //감추게
}
}인덱스 번호를 받아와서 클릭했을때는 화면이 보이게 하고, 다시 클릭하면 상세 내용이 닫히게 한다.
5. 전체코드
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Spring MVC01</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
loadList();
});
function loadList(){
// 서버와 통신 : 게시판 리스트 가져오기
$.ajax({
url : "boardList.do",
type : "get",
dataType : "json",
success : makeView,
error : function(){ alert("error"); }
});
} // 0 1 2 --->
function makeView(data){ // data =[{ }, { }, { }, ...]
var listHtml="<table class='table table-bordered'>";
listHtml+="<tr>";
listHtml+="<td>번호</td>";
listHtml+="<td>제목</td>";
listHtml+="<td>작성자</td>";
listHtml+="<td>작성일</td>";
listHtml+="<td>조회수</td>";
listHtml+="</tr>";
$.each(data, function(index, obj){ // 앞에는 인덱스를 받고, 뒤에는 데이터를 받는다
listHtml+="<tr>";
listHtml+="<td>"+obj.idx+"</td>";
listHtml+="<td id='t"+obj.idx+"'><a href='javascript:goContent("+obj.idx+")'>"+obj.title+"</a></td>";
listHtml+="<td>"+obj.writer+"</td>";
listHtml+="<td>"+obj.indate.split(' ')[0]+"</td>";
listHtml+="<td id='cnt"+obj.idx+"'>"+obj.count+"</td>";
listHtml+="<span>";
listHtml+="</tr>";
listHtml+="<tr id='c"+obj.idx+"' style='display:none'>";
listHtml+="<td>내용</td>";
listHtml+="<td colspan='4'>";
listHtml+="<textarea id='ta"+obj.idx+"' rows='7' class='form-control' readonly>"+obj.content+"</textarea>";
listHtml+="<br/>"
listHtml+="<span id='ub"+obj.idx+"'><button class='btn btn-success btn-sm' onclick='goUpdateForm("+obj.idx+")'>수정화면</button></span> "
listHtml+="<button class='btn btn-warning btn-sm' onclick='goDelete("+obj.idx+")'>삭제</button>"
listHtml+="</td>";
listHtml+="</tr>";
});
listHtml+="<tr>";
listHtml+="<td colspan='5'>";
listHtml+="<button class='btn btn-primary btn-sm' onclick='goForm()'>글쓰기</button>";
listHtml+="</td>";
listHtml+="</tr>";
listHtml+="</table>";
$("#view").html(listHtml);
$("#view").css("display", "block");
$("#wfrom").css("display", "none");
}
function goForm(){
$("#view").css("display", "none");
$("#wfrom").css("display", "block");
}
function goList(){
$("#view").css("display", "block");
$("#wfrom").css("display", "none");
}
function goInsert(){
/*
var title = $("#title").val();
var content = $("#content").val();
var writer = $("#writer").val();
*/
// serialize(): 모든 데이터를 한번에 가져올때 사용
var fData=$("#frm").serialize();
alert(fData);
$.ajax({
url : "boardInsert.do",
type: "post",
data: fData,
success: loadList,
error : function() { alert("error")}
});
// 폼 초기화
/* $("#title").val("");
$("#content").val("");
$("#writer").val(""); */
$("#fclear").trigger("click");
}
function goContent(idx){
if($("#c"+idx).css("display")=="none") {
$.ajax({
url : "boardContent.do",
type : "get",
data : {"idx":idx},
dataType : "json",
success : function(data){
$("#ta"+idx).val(data.content)
},
error : function() {alert("error"); }
})
$("#c"+idx).css("display","table-row"); //보이게
$("#ta"+idx).attr("readonly",true);
} else {
$("#c"+idx).css("display","none"); //감추게
//닫힐때 조회수 누적
$.ajax({
url : "boardCount.do",
type : "get",
data : {"idx":idx},
dataType : "json",
success: function(data){
$("#cnt"+idx).text(data.count);
},
error : function() { alert("error"); }
})
}
}
function goDelete(idx){
$.ajax({
url : "boardDelete.do",
type : "get",
data : {"idx":idx},
success : loadList,
error : function() { alert("error") }
})
}
function goUpdateForm(idx){
$("#ta"+idx).attr("readonly",false);
var title = $("#t"+idx).text();
var newInput = "<input type='text' id='nt"+idx+"' class='form-control' value='"+title+"' />"
$("#t"+idx).html(newInput);
var newButton="<button class='btn btn-info btn-sm' onclick='goUpdate("+idx+")'>수정</button>"
$("#ub"+idx).html(newButton);
}
function goUpdate(idx){
var title = $("#nt"+idx).val();
var content = $("#ta"+idx).val();
$.ajax({
url : "boardUpdate.do",
type : "post",
data : {"idx":idx,"title":title,"content":content},
success : loadList,
error : function() { alert("error") }
})
}
</script>
</head>
<body>
<div class="container">
<h2>Spring MVC02</h2>
<div class="panel panel-default">
<div class="panel-heading">Board</div>
<div class="panel-body" id="view">List</div>
<div class="panel-body" id="wfrom" style="display:none">
<form id="frm">
<table class="table">
<tr>
<td>제목</td>
<td><input type="text" name="title" id="title" class="form-control"/></td>
</tr>
<tr>
<td>내용</td>
<td><textarea rows="7" name="content" id="content" class="form-control"></textarea></td>
</tr>
<tr>
<td>작성자</td>
<td><input type="text" name="writer" id="writer" class="form-control"/></td>
</tr>
<tr>
<td colspan="2" align="center">
<button type="submit" class="btn btn-success btn-sm" onclick="goInsert()">등록</button>
<button type="reset" class="btn btn-warning btn-sm" id="fclear">취소</button>
<button type="button" class="btn btn-info btn-sm" onclick="goList()">리스트</button>
</td>
</tr>
</table>
</form>
</div>
<div class="panel-footer">인프런_스프1탄_안신애</div>
</div>
</div>
</body>
</html>
6. REST 전송 방식
REST : 서버의 고유한 리소스를 접근하는 대표 상태 전송
| 어노테이션 | 기능 |
| @RestController | Controller가 REST방식을 처리하기 위한 것임을 명시 |
| @ResponseBody | 일반적인 JSP와 같은 뷰로 전달되는 게 아니라 데이터 자체를 전달하기 위한 용도 |
| @PathVariable | URL 경로에 있는 값을 파라메터로 추출하려고 할때 사용 |
| @CrossOrigin | Ajax의 크로스 도메인 문제를 해결해주는 어노테이션 |
| @RequestBody | JSON 데이터를 원하는 타입으로 바인딩 처리 |
기존에 작업은 /boardInsert.do 등으로 비슷한 URI를 사용하고 있다.
서버에 자원을 요청할 때 통일성이 있는 부분들을 합쳐서 단일 URI를 만드는 전송방식을 REST전송방식이라고 한다.
컨트롤러를 RestController로 변경해보자
package kr.board.controller;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.DeleteMapping;
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.PutMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import kr.board.entity.Board;
import kr.board.mapper.BoardMapper;
@RequestMapping("/board")
@RestController // Ajax통신할 때 쓰는 컨트롤러이기 때문에 @ResponseBody를 생략할 수 있다
public class BoardRestController {
@Autowired
BoardMapper boardMapper;
// @ResponseBody -> jackson-databind(객체를 -> json 데이터 포멧으로 변환)
@GetMapping("/all")
public List<Board> boardList(){
List<Board> list = boardMapper.getLists();
return list; // JSON 데이터 형식으로 변환(API)해서 리턴(응답)하겠다
}
//@RequestMapping("/boardInsert.do")
@PostMapping("/new")
public void boardInsert(Board vo) {
boardMapper.boardInsert(vo);
}
@DeleteMapping("/{idx}")
public void boardDelete(@PathVariable("idx") int idx) {
boardMapper.boardDelete(idx);
}
@PutMapping("/update")
public void boardUpdate(@RequestBody Board vo) {
boardMapper.boardUpdate(vo);
}
@GetMapping("/{idx}")
public Board boardContent (@PathVariable("idx") int idx) {
Board vo = boardMapper.boardContent(idx);
return vo;
}
@PutMapping("/count/{idx}")
public Board boardCount(@PathVariable("idx") int idx) {
boardMapper.boardCount(idx);
Board vo = boardMapper.boardContent(idx);
return vo;
}
}
그리고 jsp파일에 ajax들의 url 경로와 type을 controller에 맞춰서 변경해 주면 된다.
update를 할때는 data를 전송할 때 JSON.stringify로 묶어준다음 전송을 해야한다.
function goUpdate(idx){
var title = $("#nt"+idx).val();
var content = $("#ta"+idx).val();
$.ajax({
url : "board/update",
type : "put",
data : JSON.stringify({"idx":idx,"title":title,"content":content}),
success : loadList,
error : function() { alert("error") }
})
}
해당 내용은 인프런 박매일강사님의 스프링 프레임워크는 내 손에 [스프1탄] 강의 정리내용입니다.
728x90