ajax를 이용한 게시물 공감/비공감 기능 만들기 (Form 데이터 전송)

가장 기초적인 버전의 ajax 사용법입니다. 저처럼 서버쪽 공부하면서 테스트용으로 프론트를 만드는 분들에게 도움이 될 것 같습니다.

 

ajax는 간단히 전체 페이지가 아닌 일부분의 내용만 고쳐주도록 해주는 자바스크립트의 기능입니다. 서버에서는 요청받은 내용에 대해 처리하고 데이터를 JSON이나 XML 형식으로 리턴시켜주면 됩니다. REST API의 형식과 비슷합니다. 다만 외부에서 요청하는 데이터가 아닌만큼 완전한 REST API 형식이 아닌, 단순하게 데이터 교환만 해주도록 작성했습니다.

 

---

 

 

먼저 트리거가 될 버튼을 만들어줍니다. 그냥 텍스트도 상관없습니다. 자바스크립트에서 해당 링크를 찾을 수 있도록 id를 부여할 수 있으면 됩니다. 저는 부트스트랩4를 사용했습니다. 

 

<a id="bGoodBtn" class="btn btn-success btn-md active mb-3">공감</a>

 

 

그리고 버튼을 눌렀을 때 서버에 전송할 파라미터들을 <form> 태그를 사용해 넣어줍니다. 저는 스프링 시큐리티의 CSRF 토큰과 게시판 이름, 게시물 번호를 넣어줬습니다.

<!-- 공감/비공감 Param 정보 -->
<form name="boardInfo">
	<s:csrfInput />
	<input type="hidden" name="boardName" value="${boardName}">
	<input type="hidden" name="bId" value="${vo.bId}">
</form>

 

 

---

 

 

이제 자바 스크립트 코드를 작성해줍니다. id가 'bGoodBtn' 버튼을 클릭했을 때 실행되는 함수이고, name이 'boardInfo'인 form을 찾아 그 값들을 변수로 만들어줍니다. 

 

그리고 전송할 url과 type 등을 지정한 뒤 최종적으로 변수 form을 첨부해 전송합니다. 성공적으로 데이터를 리턴받았다면 success의 함수가 실행될 것이고, 실패하거나 null을 리턴받았다면 error의 내용이 실행됩니다.

<script>
	$('#bGoodBtn').on('click', function() {
		var form = $("form[name=boardInfo]").serialize();
		$.ajax({
			url : "/board/basicBoardBGood",
			type : "POST",
			dataType : "json",
			data : form,
			success : function(data) {
				var txt = data.bGoodCount;
				$('#bGoodResult').text(txt);
			},
			error : function() {
			alert("이미 공감한 게시물입니다.");
			}
		});
	});
</script>

 

 

 

success의 함수를 보면 'bGoodResult'라는 id값을 가진 곳에다가 txt 변수를 출력하라고 되어 있습니다. 따라서 출력할 곳만 지정해주면 됩니다. 저는 <a> 태그에 id를 주고 값이 출력될 부분을 감쌌습니다. 공감버튼을 누르지 않은 상태라면 'vo.bGood'의 값이 출력될 것이고, 공감버튼을 누르면 자바스크립트가 작동해 해당 내용을 서버에서 받은 값으로 대체해줍니다.

<th scope="col" style="width: 30%" class="text-right align-middle">조회수 ${vo.bHit}<br>
				공감 <a id="bGoodResult">${vo.bGood}</a>

 

 

---

 

 

공감버튼을 눌러보면 성공적으로 <a> 태그 안에 있는 내용이 바뀌는 것을 확인할 수 있습니다. 

 

 

 

 

 

비공감도 동일하게 만들어주면 됩니다. 자바스크립트를 할줄 알면 한 코드 내에서 한번에 처리할 수 있을 것 같은데 아직 프론트쪽은 공부할 시간이 없어 대충대충 기능만 되도록 만들어보고 있습니다. ㅎㅎ 아래는 전체 코드입니다.

 

서버에서는 그냥 form 태그에서 submit 하는 것과 동일하게 처리하면 됩니다.

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<%
	String boardName = (String) request.getAttribute("boardName");
	pageContext.setAttribute("categoryName", "게시판 / " + boardName);
	pageContext.setAttribute("viewName", "게시물 보기");
%>

<%@ include file="/WEB-INF/views/layout/top.jsp"%>

<!-- 게시물 VO -->
<c:set var="vo" value="${boardVO}" />

<!-- 게시물이 없을 경우 리스트로 리다이렉트 -->
<c:choose>
	<c:when test="${vo == null}">
		<script type="text/javascript">
			$(document).ready(function() {
				alert("존재하지 않는 게시물입니다.");
				location.href = "/board/basicBoardList/${boardName}/1";
			});
		</script>
	</c:when>

	<c:otherwise>
		<div class="col-lg-9">
			<div class="row">
				<div class="col">
					<!-- 공감/비공감 Param 정보 -->
					<form name="boardInfo">
						<s:csrfInput />
						<input type="hidden" name="boardName" value="${boardName}">
						<input type="hidden" name="bId" value="${vo.bId}">
					</form>

					<!-- 답글쓰기 버튼 -->
					<a href="/board/basicBoardWriter/${boardName}/${vo.bId}"
						class="btn btn-info btn-md active mb-3" role="button" aria-pressed="true"
					>답글쓰기</a>

					<!-- 공감 버튼 -->
					<a id="bGoodBtn" class="btn btn-success btn-md active mb-3">공감</a>
					<script>
						$('#bGoodBtn').on('click', function() {
							var form = $("form[name=boardInfo]").serialize();
							$.ajax({
								url : "/board/basicBoardBGood",
								type : "POST",
								dataType : "json",
								data : form,
								success : function(data) {
									var txt = data.bGoodCount;
									$('#bGoodResult').text(txt);
								},
								error : function() {
									alert("이미 공감한 게시물입니다.");
								}
							});
						});
					</script>

					<!-- 비공감 버튼 -->
					<a id="bHateBtn" class="btn btn-success btn-md active mb-3">비공감</a>
					<script>
						$('#bHateBtn').on('click', function() {
							var form = $("form[name=boardInfo]").serialize();
							$.ajax({
								url : "/board/basicBoardBHate",
								type : "POST",
								dataType : "json",
								data : form,
								success : function(data) {
									var txt = data.bGoodCount;
									$('#bHateResult').text(txt);
								},
								error : function() {
									alert("이미 비공감한 게시물입니다.");
								}
							});
						});
					</script>
				</div>

				<!-- 삭제버튼 (작성자에게만 보여주도록 함) -->
				<s:authorize access="isAuthenticated()">
					<div class="col-md-auto">
						<c:if test="${user.username eq vo.bUserId}">
							<a id="bHateBtn" class="btn btn-secondary btn-md active mb-3">삭제</a>
						</c:if>
					</div>
				</s:authorize>
			</div>

			<!-- 게시물 내용 -->
			<table class="table">
				<thead>
					<tr>
						<th scope="col" style="width: 70%" class="align-middle"><h3>${vo.bTitle}</h3>
							${vo.bUsername}(${vo.bUserId})</th>
						<th scope="col" style="width: 30%" class="text-right align-middle">조회수 ${vo.bHit}<br>
							공감 <a id="bGoodResult">${vo.bGood}</a> / 비공감<a id="bHateResult">${vo.bHate}</a><br>${vo.bDate}
						</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td><pre class="h5">${vo.bContent}</pre></td>
					</tr>
				</tbody>
			</table>
		</div>

		<!-- Right Sidebar -->
		<div class="col-lg-3 border-left">라이트~</div>
	</c:otherwise>

</c:choose>

<%@ include file="/WEB-INF/views/layout/bottom.jsp"%>