[Spring] Ajax 사용하여 회원 등급 조정하기

결과화면

회원관리 페이지

 

등급 올리기

 

결과

 

등급올리기 전 DB

 

적용 후 DB

 

 

(1) 회원등급 조정

HTML5

<li id="tab1">
	<div id="memberAdmin">
		<div id="memberTitle">
			<p>아이디</p>
			<p>이름</p>
			<p>가입일</p>
			<p>등급</p>
			<p>삭제</p>
		</div>
		<c:forEach items="${memberList }" var="m">
			<div id="memberList" class="${m.sm_grade }">
				<p id="sm_id">${m.sm_id }</p>
				<p>${m.sm_name }</p>
				<p>${m.sm_joindate }</p>
				<p id="mBtn">
					<input type="button" name="down" class="gradeBtn" value="▼"/>
					&nbsp;<span id="sm_grade" class="${m.sm_id }">${m.sm_grade }</span>&nbsp;
					<input type="button" name="up" class="gradeBtn" value="▲"/>
				</p>
				<p>
					<span>
						<img src="../img/user_delete.png" alt="delete" style="width:20px;padding-top:2px;cursor:pointer;" onclick="userDelete('${m.sm_id}')"/>
					</span>
				</p>
			</div>
		</c:forEach>
	</div>
</li>

 

 

 

JavaScript(jQuery, Ajax)

//회원 등급
$(".gradeBtn").click(function(){
   	var btn = $(this).attr("name");
   	var sm_id = $(this).parent().siblings("#sm_id").text();
   	var sm_grade = $(this).siblings("#sm_grade").text();

   	if(sm_grade == "0" && btn == "down"){
   		alert("더이상 등급을 내릴 수 없습니다.");
   		return false;
   	}
   	if(sm_grade == "9" && btn == "up"){
   		alert("더이상 등급을 올릴 수 없습니다.");
   		return false;
   	}
   	var al = "";
   	btn == "down" ? al = "등급을 내리시겠습니까?" : al = "등급을 올리시겠습니까?";
   	if(!confirm(al)){
   		return false;
   	}else{
   		$.ajax({
			url : '${pageContext.request.contextPath}/admin/gradeUpdate?sm_grade='+ sm_grade + '&&sm_id=' + sm_id + '&&type=' + btn,
			type : 'post',
			success : function(data) {
				$("." + sm_id).text(data);
			}, error : function() {
				console.log("실패");
			}
		});
   	}
   });

 

 

 

Controller

(Ajax를 사용할 때는 @ResponseBody 꼭 있어야 합니다.)

@PostMapping("/gradeUpdate")
@ResponseBody
public int gradeUpdate(HttpServletRequest request) {
	int grade = Integer.parseInt(request.getParameter("sm_grade"));
	String id = request.getParameter("sm_id");
	String type = request.getParameter("type");
	
	HashMap<String, Object> list = new HashMap<String, Object>();
	list.put("sm_id", id);
	
	int result = 0;
	if(type.equals("down") || type == "down"){
		result = grade - 1;
	}else {
		result = grade + 1;
	}
	list.put("sm_grade", result);
	adminService.gradeUpdate(list);
	return result;
}

등급을 올리고 내리고를 컨트롤러에서 계산해서 DB로 보내줍니다.

 

 

Service

public void gradeUpdate(HashMap<String, Object> list) {
	adminDAO.gradeUpdate(list);
}

 

DAO

public void gradeUpdate(HashMap<String, Object> list) {
	sqlSession.update("admin.gradeUpdate",list);
}

 

Mapper

<update id="gradeUpdate">
	UPDATE smember SET sm_grade=#{sm_grade} WHERE sm_id=#{sm_id}
</update>