ajax를 이용한 위시리스트 구현

• 리디북스 홈페이지의 위시리스트 서비스를 모델링하여 다음과 같은 로직을 구성함
• 위시버튼을 클릭하였을 때, ajax로 사용자 아이디와 책 아이디를 전달하여 DB에 입력함
• 위시리스트 테이블은 (m_email, b_itemId)를 pk로 지정했음. DataAccessException을 이용해 선택했을 때와 선택을 취소했을 때의 로직을 한번에 처리함.
• ajax는 Boolean 형태의 데이터를 돌려받지 못한다. 그래서 String 형태의 데이터를 받아 분기를 해줬음.

//컨트롤러
@ResponseBody
@GetMapping("addItem.do")
public String addItemToWishList(WishVo wishVo) {
	return service.clickWishButton(wishVo);
}
//서비스단
@Override
public String clickWishButton(WishVo wishVo) {
	try {
		mapperWish.insertWishList(wishVo);
		return "selected";
	}catch(DataAccessException dae) {
		mapperWish.deleteWishList(wishVo);
		return "unselected";
	}
}

$(document).on("click","#in-wish-list",function(){
	let loginUser = $("#login-user-for-js").val();
	let b_itemId = $("#itemId").val();
	if(loginUser == undefined){
		alert("로그인이 필요한 서비스입니다.");
		location.href = "../member/login.do";
		return false;
	}
	$.ajax({
		url : "../wishList/addItem.do",
		type : "Get",
		data : {b_itemId : b_itemId, m_email : loginUser},
		dataType : "text",
		success : function(selectWish){
			//alert(selectWish);
			let html = '';
			html += '<span>';
			if(selectWish == "selected"){
				html += '<i class="ion-ios-heart" style="color:red"></i>';
			}else{
				html += '<i class="ion-ios-heart-outline"></i>';
			}
			html += '</span>';
			$("#in-wish-list").html(html);
			if(selectWish == "selected" ){
				if(confirm("위시리스트 페이지로 이동하시겠습니까?")==true){
					location.href = "../wishList/moveWishPage.do";
				}else{
					return false;
				}
			}
		},
		error : function(a,b,c){
			alert("실패 :" + a.responseText);
			alert("실패 :" + c);
		}
	});
});