[AJAX] ajax - controller 통신 / update 기능

< '접수' 버튼 클릭 시 '승인'이 되도록 update 구현하기 > 

실수한 부분이랑 기억하고 싶은 부분 기록.

 

일단 update는 return 값이 기본적으로는 필요가 없다. (return 값이 없을 때는 void로 바꿔주)

 

그런데 return값을 만들어서 성패를 alert하는 용도로 개발하는 것이 좋다.(나는 이걸로 ㄱㄱ)

 

 

예제 →

jsp

<td><a class="receipt" href="javascript:void(0);" onclick="accept_btn(${data.seq}, this);">접수</a></td>

 

ajax

function accept_btn(seq, obj) {
	console.log("seq = " + seq);
	
	if (!confirm("승인하시겠습니까?")) {
		return;
	}
	var data  = {"seq" : seq};
	$.ajax({
		type		: "POST",
		url 		: "${pageContext.request.contextPath }/admin/emp/accept",
		data		:  data,
		/* contentType : "application/json", */
		success 	: function(data) {
			if(data == 'done'){
				toastAlert("success","승인 되었습니다!");
				$(obj).parent().html('승인');
			}else{
				toastAlert("error","오류가 발생하였습니다.");
			}
		},
		error		: function(error) {
			console.log(error);
		}
	});
}

 

내가 원하는건 ajax통신이 성공하면 alert가 뜨면서 '접수' 버튼이 '승인'으로 변경되도록 하고 싶어서 location.reload(); 처리를 해주었다. 그랬더니 문제가 뭐냐면, alert가 명확히 뜨기도 전에 새로고침 처리가 되어버려서 알림창을 볼 수가 없었다.

 

그래서

onclick="accept_btn(${data.seq}, this); 여기에 this를 추가해주고,

function accept_btn(seq, obj) 여기서 받아주고,

 

$(obj).parent().html('승인') 

💡하나하나 뜯어서 설명
1️⃣ $(obj) : obj는 선택하려는 HTML 요소.
2️⃣.parent() : 선택한 HTML 요소의 부모 요소를 선택하는 jQuery 메서드, 선택한 요소를 기준으로 가장 가까운 상위 부모 요소를 찾는다.
3️⃣.html('승인') : 선택한 부모 요소의 HTML 내용을 '승인'으로  바꾸는 jQuery 메서드.( ' '빈 문자열로 둘 수도 있다. )

즉, 이 코드의 목적은 선택한 HTML 요소의 부모 요소의 내용을 모두 '승인' 으로 바꾸는 것!

 

 

Controller

ajax통신에 필요한 @ResponseBody

@ResponseBody 
@RequestMapping(value="/accept", method = RequestMethod.POST)
public String adminEmpAccept(AccntVo searchVo) {
	if(adminAccntService.adminEmpAccept(searchVo) == 1) {
		return "done";
	}else {
		return "error";
	}
}

 

Service

Integer adminEmpAccept(AccntVo accnt);

 

ServiceImpl

@Override
public Integer adminEmpAccept(AccntVo accnt) {
	return adminAccntRepository.adminEmpAccept(accnt);
}

 

Repository or DAO

Integer adminEmpAccept(AccntVo accntVo);

 

xml(mapper)

<update id="adminEmpAccept"  parameterType="accnt" >
UPDATE ACCNT
SET 
	APPROVE_STS = 'Y'
WHERE 1=1
    AND APPROVE_STS = 'N'
    AND SEQ	= #{seq}
</update>