스프링 프레임워크

[스프링 프레임워크] 12장 book 파일을 ajax로 변경

반응형

 

번외

 

전에 만든 book 파일들을 이용해 프로젝트를 진행한다.

 

 

  • 입력한 데이터 자바 스크립트로 맞게 들어오는지 확인

create.jsp

submit을 button으로 변경 후 스크립트 작성

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="/resources/js/jquery.min.js"></script>
<title>Insert title here</title>
<script type="text/javascript">
$(function(){
	$("#btnSave").on("click", function(){
		let data = $("#frm").serialize();
		let dataArray = $("#frm").serializeArray();
		
		console.log("data : ", data);
		console.log("dataArray : ", dataArray);
		
		let param = {};
		
		dataArray.map(function(data, index){
			param[data.name] = data.value;
		});
		
		console.log("param : ", param)
		//------------------------------------
		let title = $("input[name='title']").val();
		let category = $("input[name='category']").val();
		let price = $("input[name='price']").val();
		
		let jsonObj = {
			"title":title,
			"category":category,
			"price":price
		}
		console.log("jsonObj : ", jsonObj);
		
	});
});
</script>
</head>
<body>
<h1>책 등록</h1>

<!-- mav.addObject("title", "도서생성"); -->
<h5>${title}</h5>

<!-- 
요청URI : /crate
요청파라미터 : {title=개똥이의 모험, category=소설, price=12000}
요청방식 : post
-->
<form id="frm" action="/create" method="post">
	<p>제목 : <input type="text" name="title" required placeholder="제목"></p>
	<p>카테고리 : <input type="text" name="category" required placeholder="카테고리"></p>
	<p>가격 : <input type="number" name="price" required placeholder="가격"></p>
	<p>
		<input type="button" id="btnSave" value="저장">
	</p>
</form>

</body>
</html>

 

결과 화면1

 

 

 

  • createAjax 추가

BookController.java

/*
요청URI : /crateAjax
요청파라미터(JSON->String) : {title:개똥이의 모험, category:소설, price:12000}
요청방식 : post
ResponseBody : BookVO -> String형태(serialize)
 */
@ResponseBody
@RequestMapping(value="/createAjax", method=RequestMethod.POST)
public BookVO createAjax(@RequestBody BookVO bookVO) {
	/*
	BookVO(bookId=0, title=개똥이의 모험, category=소설
	, price=12000, insertDate=null)
	 */
	log.info("bookVO : " + bookVO);
	
	// 도서 등록
	int result = this.bookService.createPost(bookVO); // 이곳을 거치면서 bookId값이 채워짐
	log.info("createPost->result : " + result);
	
	/*
	BookVO(bookId=0, title=개똥이의 모험, category=소설
	, price=12000, insertDate=null)
	 */
	return bookVO;
}

 

 

create.jsp

console.log("jsonObj : ", jsonObj); 하단에 추가

		//아작나써유..피씨다타서...
		//post : I/U/D(DB변화O)
		//tet : S(DB변화X)
		$.ajax({
			url:"/createAjax",
			contentType:"application/json;charset=utf-8",
			data:JSON.stringify(param),
			type:"post",
			dataType:"json",
			success:function(result){
				console.log("result : ", result);
			}
		});

 

결과 화면2

 

=> create 하고 화면 이동 추가

		//아작나써유..피씨다타서...
		//post : I/U/D(DB변화O)
		//tet : S(DB변화X)
		$.ajax({
			url:"/createAjax",
			contentType:"application/json;charset=utf-8",
			data:JSON.stringify(param),
			type:"post",
			dataType:"json",
			success:function(result){
				console.log("result : ", result);
				
				if(result!=null) {
					location.href = "/list";
				}
			}
		});

 

결과 화면3

 

 

 

  • ajax로 list 수정

list.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="/resources/js/jquery.min.js"></script>
<title>도서 목록</title>
<script type="text/javascript">
$(function(){
	$("#btnSearch").on("click",function(){
		let keyword = $("input[name='keyword']").val();
		
		//json오브젝트
		let data = {
			"keyword":keyword
		};
		
		console.log("data : ", data);
		
		$(this).parent().submit();
	});
	
	// 목록 함수 호출
	getList("");
});

// 목록
function getList(keyword) {
	
	// JSON 오브젝트
	let data = {
		"keyword":keyword
	};
	// data : {"keyword":""}
	
	//아작나써유..(피)씨다타써...
	$.ajax({
		url: "/listAjax",
		contentType:"application/json;charset=utf-8",
		data:JSON.stringify(data),
		type:"post",
		dataType:"json",
		success:function(result){
			// result : List<BookVO>
			console.log("result : ", result);
			
			let str = "";
			
			$.each(result, function(idx, bookVO){
				str += "<tr>";
				str += "<td>" + (idx+1) + "</td>";
				str += "<td><a href='/detail?bookId=" + bookVO.bookId + "'>" + bookVO.title + "</a></td>";
				str += "<td>" + bookVO.category + "</td>";
				str += "<td>" + bookVO.price + "원</td>";
				str += "</tr>";
			});
			
			$("#trShow").html(str);
		}
	});
}

</script>
</head>
<body>
<h3>도서 목록</h3>
<p>
	<!-- action속성 및 값이 생략 시, 현재 URI(/list)를 재요청. 
		method는 GET(form 태그의 기본 HTTP 메소드는 GET임) 
	param : keyword=알탄
	요청URI : /list?keyword=알탄 or /list or /list?keyword=
	요청파라미터 : keyword=알탄
	요청방식 : get
	-->
	<form>
		<input type="text" name="keyword" value="" placeholder="검색어를 입력하세요"/>
		<!-- submit / button / reset -->
		<button type="button" id="btnSearch">검색</button>
	</form>
	<a href="/create">도서 등록</a>
</p>
<!-- mav.addObject("bookVOList", bookVOList) -->
<%-- <p>${bookVOList}</p> --%>
<table border="1">
	<thead>
		<tr>
			<th>번호</th><th>제목</th><th>카테고리</th><th>가격</th>
		</tr>
	</thead>
	<tbody id="trShow">
		<!-- 
		forEach 태그? 배열(String[], int[][]), Collection(List, Set) 또는 
		Map(HashTable, HashMap, SortedMap)에 저장되어 있는 값들을 
		순차적으로 처리할 때 사용함. 자바의 for, do~while을 대신해서 사용함
		var : 변수
		items : 아이템(배열, Collection, Map)
		varStatus : 루프 정보를 담은 객체 활용
		   - index : 루프 실행 시 현재 인덱스(0부터 시작)
		   - count : 실행 회수(1부터 시작. 보통 행번호 출력)
		 -->
		<!-- data : mav.addObject("bookVOList", bookVOList); -->
		<!-- bookVOList => List<BookVO> -->
		<!-- row : bookVO 1행 -->
<%-- 		<c:forEach var="bookVO" items="${bookVOList}" varStatus="stat"> --%>
<!-- 			<tr> -->
<%-- 				<td>${stat.count}</td> --%>
<%-- 				<td><a href="/detail?bookId=${bookVO.bookId}">${bookVO.title}</a></td> --%>
<%-- 				<td>${bookVO.category}</td> --%>
<%-- 				<td><fmt:formatNumber value="${bookVO.price}" pattern="#,###" />원</td> --%>
<!-- 			</tr> -->
<%-- 		</c:forEach> --%>
	</tbody>
</table>
</body>
</html>

 

 

BookController.java

/*
요청URI : /listAjax
요청파라미터(JSON->String) : {keyword:알탄} or {keyword:""}
요청방식 : post
 */
@ResponseBody
@RequestMapping(value="/listAjax", method=RequestMethod.POST)
public List<BookVO> listAjax(@RequestBody Map<String,Object> map) {
	log.info("list에 왔다");
	log.info("list->map : " + map);
	
	//map{"keyword":"알탄"}
	//map.put("keyword", keyword);
	
	//도서 목록 map{"keyword":"알탄"}
	List<BookVO> bookVOList = this.bookService.list(map);
	log.info("list->bookVOList : " + bookVOList);
	
	return bookVOList;
}

 

결과 화면4

 

 

 

  • 검색 ajax로 변환

list.jsp

함수 내용 추가

$("#btnSearch").on("click",function(){
	let keyword = $("input[name='keyword']").val();
	
	//json오브젝트
	let data = {
		"keyword":keyword
	};
	
	console.log("data : ", data);
	
		//$(this).parent().submit();
	getList(keyword);
});

 

결과 화면5

 

 

 

  • 전체보기

list.jsp

목록 함수 호출 전에 추가, 버튼 추가

	// 전체 보기
	$("#btnSearchAll").on("click",function(){
		getList("");
	});

 

<button type="button" id="btnSearchAll">전체보기</button>

 

결과 화면6 : 검색 후 전체보기 클릭 시 모든 목록 다 뜸

 

 

 

  • detail를 ajax로 변경 (updata)

detail.jsp

submit을 button으로 변경, 내용 수정 변경

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="/resources/js/jquery.min.js"></script>
<title>Insert title here</title>
<script type="text/javascript">
let title = "${bookVO.title}";
let category = "${bookVO.category}";
let price = "${bookVO.price}";

//document 내의 모든 요소들이 로딩된 후에 실행
//1개의 jsp에 1만 사용하자
$(function(){
	// 내용 수정
	$("#confirm").on("click",function(){
		let dataArray = $("#frm").serializeArray();
		
		console.log("dataArray : ", dataArray);
		
		// JSON 오브젝트
		let data = {};
		
		dataArray.map(function(row,idx){
			//	key		value
			data[row.name] = row.value;
		});
		
		console.log("data : ", data);
		
		// 아작나써유..(피)씨다타써...
		$.ajax({
			url:"/updataAjax",
			contentType:"application/json;charset=utf-8",
			data:JSON.stringify(data),
			type:"post",
			dataType:"json",
			success:function(result){
				console.log("result : ", result);
			}
		});
		
		/*
		let data = {
			"bookId":"136",
			"title":"더개똥이",
			"category":"소설",
			"price":"12002"
		}
		*/
		
	});
	
	
	$("#list").on("click", function(){
		location.href="/list";
	});
	
	// 수정 버튼 클릭 -> 수정 버튼 전환
	$("#edit").on("click", function(){
		$("#p1").css("display","none");
		$("#p2").css("display","block");
		
		// readonly의 속성을 제거함
		$(".formdata").removeAttr("readonly");
	});
	
	// 취소 버튼 클릭
	$("#cancel").on("click",function(){
		$("#p1").css("display","block");
		$("#p2").css("display","none");
		//readonly 속성을 추가
		$(".formdata").attr("readonly",true);
		//입력란 초기화
		$("input[name='title']").val(title);
		$("input[name='category']").val(category);
		$("input[name='price']").val(price);
		
		console.log("title : " + title + ", category : " + category + ", price : " + price);
	});
	
	// 삭제 버튼 클릭
	$("#delete").on("click",function(){
		$("#frm").attr("action", "/deletePost");
		
		let result = confirm("삭제하시겠습니까?");
		// 확인 : true / 취소 : false
		console.log("result : " + result);
		
		if(result > 0) { //true
			$("#frm").submit();
		
		} else { //false
			alert("삭제가 취소되었습니다.");
			return;
		}
	});
});
</script>
</head>
<body>
<h1>${title}</h1>
<%-- <h5>${bookVO}</h5> --%>

<!-- 
요청URI : /crate
요청파라미터 : {bookId=127, title=개똥이의 모험2, category=소설2, price=12002}
요청방식 : post
-->
<form id="frm" name="frm" action="/updatePost" method="post">
	<!-- 폼데이터 -->
	<input type="hidden" name="bookId" value="${bookVO.bookId}">
	<p>제목 : <input type="text" name="title" value="${bookVO.title}" 
				class="formdata" readonly required placeholder="제목"></p>
	<p>카테고리 : <input type="text" name="category" value="${bookVO.category}" 
				class="formdata" readonly required placeholder="카테고리"></p>
	<p>가격 : <input type="number" name="price" value="${bookVO.price}" 
				class="formdata" readonly required placeholder="가격"></p>
	<!-- //// 일반모드 시작 //// -->
	<p id="p1">
		<input type="button" id="edit" value="수정">
		<input type="button" id="delete" value="삭제">
		<input type="button" id="list" value="목록">
	</p>
	<!-- //// 일반모드 끝 //// -->
	
	<!-- //// 수정모드 시작 //// -->
	<p id="p2" style="display: none">
		<input type="button" id="confirm" value="확인">
		<input type="button" id="cancel" value="취소">
	</p>
	<!-- //// 수정모드 끝 //// -->
</form>

</body>
</html>

 

 

BookController.java

/*
 요청URI : /updataAjax 
 요청파라미터(JSON->String) : {bookId=127, title=개똥이의 모험2, category=소설2, price=12002}
 요청방식 : post
 */
@ResponseBody
@RequestMapping(value="/updataAjax", method=RequestMethod.POST)
public BookVO updateAjax(@RequestBody BookVO bookVO) {
	log.info("updatePost->bookVO : " + bookVO);
	
	//insert, update, delete의 return 타입 : int
	int result = this.bookService.updatePost(bookVO);
	log.info("updatePost->result : " + result);
	
	// 상세보기
	bookVO = this.bookService.detail(bookVO);
	
	return bookVO;
}

 

결과 화면7

 

 

반응형

'스프링 프레임워크' 카테고리의 다른 글

[스프링 프레임워크] 14장 컨트롤러 요청 처리1(컨트롤러 메서드 매개변수, 요청 처리, 요청 데이터 처리 애너테이션, 요청 처리 자바빈즈)  (0) 2024.05.01
[스프링 프레임워크] 13장 컨트롤러 응답  (0) 2024.04.30
[스프링 프레임워크] 11장 컨트롤러 요청 매핑  (0) 2024.04.29
[스프링 프레임워크] 10장 ckeditor5를 응용한 문의사항 게시판(작성, 리스트 출력)  (0) 2024.04.26
[스프링 프레임워크] 9장 기존 파일을 타일즈를 이용하여 분리  (0) 2024.04.26

티스토리툴바