Spring 실습 6일차(ajax를 활용한 Create, Update, Delete)
이전 수업때 만들어놓은 lprodController의 Create, Update, Delete를 이번엔 ajax로 해볼 예정이다.
데이터베이스는 lpord테이블을 사용했다.
<!-- json 데이터 바인딩을 위한 의존 라이브러리 -->
<!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-databind -->
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.13.3</version>
</dependency>
우선 jackson 라이브러리를 사용하기 위해 우선 pom.xml에서 <dependencies> 안에 위 코드를 추가한다.
tiles-config.xml을 수정해줬는데 오늘 쓸 예제에서는 사용되지 않으나 적어놓으면 나중에 쓸 일이 있을것같아 추가했다.
기존 메인 layout 만 정의되어 있을 경우 return "board/modify"; * / * 형식만 Tiles 처리가능
→
서브 layout 추가로 단일 return "formHome"; 형식도 Tiles 처리가능
이제 jsp에서 넘어오는 데이터들을 ajax로 보내주어야 한다.
※ 일단 input의 type이 submit이라면 button으로 바꿔주고 진행해야 한다.
(create, update, delete 전부)
Create
<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<!-- jQuery를 사용하기 위한 스크립트 경로 설정 -->
<script type="text/javascript" src="/resources/js/jquery.min.js"></script>
<title>Insert title here</title>
<script type="text/javascript">
// body 태그의 요소들이 준비 되었을 때
$(function(){
// id=btnSubmit이라는 속성이 들어있는 요소를 클릭하면
$('#btnSubmit').on('click', function(){
// input중 name속성값이 lprodId인 요소의 value
let lprodId = $('input[name="lprodId"]').val();
// input중 name속성값이 lprodGu인 요소의 value
let lprodGu = $('input[name="lprodGu"]').val();
// input중 name속성값이 lprodNm인 요소의 value
let lprodNm = $('input[name="lprodNm"]').val();
// JSON형식으로 3개의 데이터를 하나로 묶음
let data = {
"lprodId":lprodId,
"lprodGu":lprodGu,
"lprodNm":lprodNm
};
//{"lprodId": "14","lprodGu": "P501","lprodNm": "분식류"}
console.log("data : ", data)
$.ajax({
// 요청할 URL
url:"/lprod/createAjax",
contentType:"application/json;charset=utf-8",
// JSON으로는 보낼수 없어서 풀어준다.
data:JSON.stringify(data),
// post 방식
type:"post",
dataType:"text",
// 성공 시 함수 실행
success:function(result){
// result : success
console.log("result : " + result);
if(result=="success"){
// 경로 요청
location.href = "/lprod/list";
}
}
});
});
});
</script>
</head>
<body>
<!-- mav.addObject("title","상품 분류 생성") -->
<h1>${title}</h1>
<!--
요청URI : /lprod/create
요청파라미터 : {lprodId=14, lprodGu=P501, lprodNm=분식류}
요청방식 : post
-->
<form action="/lprod/create" method="post">
<p><input type="number" name="lprodId" placeholder="상품분류ID(ex. 14)"></p>
<p><input type="text" name="lprodGu" required placeholder="상품분류코드(ex. P501)"></p>
<p><input type="text" name="lprodNm" placeholder="상품분류명(ex. 분식류)"></p>
<p><input type="button" id="btnSubmit" value="전송"></p>
</form>
</body>
</html>
ajax를 사용해 createAjax의 경로로 데이터를 보내고 controller에서 받아줘야한다.
Controller
/*
요청URI :/lprod/createAjax
요청파라미터(JSON->String : serialize) : {"lprodId": "14","lprodGu": "P501","lprodNm": "분식류"}
요청방식 : post
*/
@RequestMapping(value="/createAjax", method=RequestMethod.POST)
public ResponseEntity<String> createAjax(@RequestBody LprodVO lprodVO) {
// Service 인터페이스 호출
int result = this.lprodService.createPost(lprodVO);
log.info("lprodVO : " + lprodVO);
log.info("result : " + result);
ResponseEntity<String> entity = new ResponseEntity<String>("success",HttpStatus.OK);
return entity;
}
@RequestBody를 넣어주면 넘어온 데이터가 lprodVO에 LprodVO속성으로 담기게 되고, createPost가 실행된다.
ResponseEntity<String> entity = new ResponseEntity<String>("success",HttpStatus.OK);
return entity;
ResponseEntity 객체를 생성. ResponseEntity는 HTTP 응답을 나타내는 데 사용된다.
"seccess"라는 문자열과 200 OK 응답이 전송된다.
success:function(result){
// result : success
console.log("result : " + result);
if(result=="success"){
// 경로 요청
location.href = "/lprod/list";
}
}
result라는 이름으로 return된 entity의 "success"를 받아오고 성공했다는 뜻이기 때문에 넘어오면 list로 넘겨주며 createAjax의 응답이 종료된다.
Update, Delete
두 작업 모드 detail.jsp의 스크립트에서 진행할 수 있다.
// 업데이트 확인 버튼 클릭
$('#confirm').on('click', function(){
let lprodId = $('input[name="lprodId"]').val();
let lprodGu = $('input[name="lprodGu"]').val();
let lprodNm = $('input[name="lprodNm"]').val();
let data = {
"lprodId":lprodId,
"lprodGu":lprodGu,
"lprodNm":lprodNm
}
//{"lprodId": "1","lprodGu": "P101","lprodNm": "컴퓨터제품2"}
console.log("data : ", data)
$.ajax({
url:"/lprod/updateAjax",
contentType:"application/json;charset=utf-8",
data:JSON.stringify(data),
type:"post",
dataType:"json",
success:function(result){
console.log("result : ", result)
if(result != null){
location.href="/lprod/detail?lprodGu="+result.lprodGu
}
}
});
});
//삭제 버튼 클릭
$('#delete').on('click', function(){
let result = confirm("삭제하시겠습니까?")
let lprodId = $('input[name="lprodId"]').val();
let lprodGu = $('input[name="lprodGu"]').val();
let lprodNm = $('input[name="lprodNm"]').val();
let data = {
"lprodId":lprodId,
"lprodGu":lprodGu,
"lprodNm":lprodNm
}
console.log("data : ", data)
if(result > 0){
$.ajax({
url:"/lprod/deleteAjax",
contentType:"application/json;charset=utf-8",
data:JSON.stringify(data),
type:"post",
dataType:"json",
success:function(result){
console.log("result : ", result)
if(result != null){
location.href="/lprod/list"
}
}
});
} else {
alert("삭제가 취소되었습니다.")
return;
}
})
받아줄 LprodController
// updateAjax 데이터를 받아줄 controller
@RequestMapping(value="/updateAjax", method=RequestMethod.POST)
public ResponseEntity<LprodVO> updateAjax(@RequestBody LprodVO lprodVO) {
log.info("updateAjax로 연결");
int result = this.lprodService.updatePost(lprodVO);
log.info("result : " + result);
ResponseEntity<LprodVO> entity = new ResponseEntity<LprodVO>(lprodVO,HttpStatus.OK);
return entity;
}
// deleteAjax 데이터를 받아줄 controller
@RequestMapping(value="/deleteAjax", method=RequestMethod.POST)
public ResponseEntity<LprodVO> deleteAjax(@RequestBody LprodVO lprodVO) {
log.info("deleteAjax로 연결");
int result = this.lprodService.deletePost(lprodVO);
log.info("result : " + result);
ResponseEntity<LprodVO> entity = new ResponseEntity<LprodVO>(lprodVO,HttpStatus.OK);
return entity;
}
createAjax와 크게 다르지 않은 모습
ajax를 사용하는 이유
AJAX란, Asynchronous Javascript And Xml(비동기식 자바스크립트와 xml)의 약자로 다음과 같은 기술들을 사용하여, 웹페이지의 전체 페이지를 새로 고치지 않고, 페이지의 일부분만을 서버에서 가지고 와서 ‘웹페이지 화면을 동적으로 변경하는 방식
- HTML DOM
- Javascript
- 브라우저 내장 객체 XMLHttpRequest 또는 Fetch 함수
- 동적인 기능 즉 움직이는 기능을 갖춘 웹페이지를 서비스하기 위해선 Ajax가 '필수'
비동기 방식이란?
비동기적 방식’은 동기적 방식과는 반대로 서버의 응답이 올 때까지 대기하지 않고, 서버의 데이터가 준비되는 동안에도 사용자가 웹페이지에서 다른 작업을 수행할 수 있는 방식을 의미
‘동기적 방식’은 요청을 하고 응답이 올 때까지 다른 일을 하지 못하고 응답이 완료되어야 다른 처리를 진행할 수 있다.
예를 들면 회원가입을 하기 위해 회원가입 정보를 웹페이지의 Form의 Input 항목에 입력 후 전송(가입) 버튼을 클릭하면 서버로 제어권이 넘어가서 서버에서 회원가입이 완료되고 새로운 웹페이지가 생성되어 브라우저에 웹페이지가 표시되어야 그다음 작업을 진행할 수 있다.
하지만 브라우저에 웹페이지가 표시되기까지 시간이 오래 걸릴 경우 고객 이탈이 발생할 수 있는데, 비동기적 방식을 택할경우, 화면전환으로 인한 지연 없이 움직임을 일으킬 수 있어 웹페이지 내 움직이는 효과가 필요한 경우 비동기 방식을 사용한다.