[스프링] 쇼핑몰 - 비동기 장바구니 [3]

이 전 글에서 장바구니 추가와 조회를 구현했다.

 

추가와 조회에 비해 삭제는 간단하다. 장바구니 조회 시에  얻을 수 있는 장바구니PR을 이용해 delete 해주면 된다..

 

---

Mapper

	
	<!-- 삭제 -->
	<delete id="cartDelete">
		DELETE FROM CART WHERE CART_NO = ${cart_no}
	</delete>

	<!-- 전체삭제 비회원 -->
	<delete id="cartDeleteCk">
		DELETE FROM CART WHERE CART_CKID = ${cart_ckid}
	</delete>

	<!-- 전체삭제 회원 -->
	<delete id="cartDeleteMem">
		DELETE FROM CART WHERE CART_MEM_NO = ${cart_mem_no}
	</delete>

 

삭제 부분은 cart_no 라는 장바구니 PR을 받아서 delete 해주면 된다.

 

동기식으로 구현한 장바구니 뷰에는, 전체삭제가 구현되어 있다.

 

전 글에서, 장바구니를 추가할 때 비회원과 회원의 로직이 나뉘어져 있었는데,

 

비회원 시에는 쿠키의 value 값인 ckid ,

 

회원시에는 회원의 PR인 mem_no를 기준으로 장바구니 insert 로직을 구현했다.

 

때문에, 전체삭제 시에는 비회원은 쿠키의 value값을, 회원은 회원의 PR로 전체삭제를 만들었다.

 

---

Controller

  //장바구니 삭제
  @ResponseBody
  @RequestMapping(value="cartDelete", method = RequestMethod.POST)
  public int cartDelete(HttpSession session, HttpServletRequest request, HttpServletResponse response, CartVO cartVO, Model model) throws Exception{
		  mainService.cartDelete(cartVO);
		  return 1;
  }
  
  //장바구니 전체삭제
  @ResponseBody
  @RequestMapping(value="cartDeleteAll", method = RequestMethod.POST)
  public int cartDeleteAll(HttpSession session, HttpServletRequest request, HttpServletResponse response, CartVO cartVO, Model model) throws Exception{
	  
	  
	  //비회원시
	  if(session.getAttribute("member") == null) {
		  Cookie cookie = WebUtils.getCookie(request, "cartCookie");
		  String ckValue = cookie.getValue();
		  cartVO.setCart_ckid(ckValue);
		  mainService.cartDeleteCk(cartVO);
	  }else if(session.getAttribute("member") != null){
		  //회원시
		  MemberVO memberVO = (MemberVO) session.getAttribute("member");
		  cartVO.setCart_mem_no(memberVO.getMEM_NO());
		  mainService.cartDeleteMem(cartVO);		  
	  }
		  return 1;
  }

장바구니 삭제 컨트롤러이다.

 

비동기 방식으로 구현한 header 장바구니 목록은 당연히 ajax를 이용해 삭제처리를 구현해야한다.

 

하지만 동기 방식으로는 ResponseBody를 통한 ajax 로직을 사용하지 않아도 되지만,

 

똑같은 내용의 컨트롤러를 두개 만들고 싶지 않아서, 동기방식인 장바구니 뷰의 삭제부분도 

 

ajax로 처리하고 location.reload(); 로 다시 페이지가 로드되도록 만들었다.

 

---

<!-- 동기 -->
function cartDelete(cart_no){
	 
	$.ajax({
		type : "POST",
		url : "/main/cartDelete",
		dataType : "json",
		data : {"cart_no" : cart_no},
		error : function(request, status, error){
        alert("code:"+request.status+"\n"+"message:"+request.responseText+"\n"+"error:"+error);
		},
		success : function(data){
			if(data == 1){
				alert("삭제완료");
				location.reload();
			}
		}
	
	});
 }
	
	 function cartDeleteAll(){
		
		 
		 $.ajax({
				type : "POST",
				url : "/main/cartDeleteAll",
				dataType : "json",
				error : function(request, status, error){
		        alert("code:"+request.status+"\n"+"message:"+request.responseText+"\n"+"error:"+error);
				},
				success : function(data){
					if(data == 1){
						alert("삭제완료");
						location.reload();
					}
				}
			
			});
 }
 
 
 
 <!-- 비동기 -->
 
   function cartHeaderDel(cart_no){
	 
		$.ajax({
			url : "/main/cartDelete",
			type : "post",
			dataType : "json",
			data : {"cart_no" : cart_no},
			success : function(data){
				cartHeaderView();
				toastr.options.preventDuplicates = true;
				toastr.success("삭제완료");
			}
		})
  }

간단한 ajax 사용이라 따로 설명할 부분이 없다. 

 

삭제 후에 비동기 방식은 조회부분 함수를 호출해서, 

 

삭제 된 장바구니 목록이 다시 출력되도록 해줬다.

 

header 장바구니 목록에 있는 삭제하기 버튼을 눌러서, 삭제했을때 비동기방식으로 적용 된 부분과

 

새로고침이 되지 않아서 장바구니가 그대로인 장바구니 뷰의 사진이다.

 

장바구니 함수를 호출하는 부분은,

 

각각 List의 삭제하기 버튼에,

 

onclick="cartDelete( [ cart_no ] )"

 

이런식으로 onclick에 장바구니 PR을 매개변수로 담아서 호출해줘서 처리했다.

 

이 부분은 생략하도록 하겠다.

 

---

다음은 주문부분을 포스팅 해보려고 한다.