[SHOP] 장바구니 선택한 상품 삭제하기( js로 form태그 실행, dataSet)

<사진출처 yes24>

 

장바구니에서 체크박스를 선택하여 선택 상품을 장바구니에서 삭제하고자 한다

이때 상품은 한가지가 될 수도 있고, 두가지 이상일 수도 있다.

 

1. mapper 쿼리 작성

장바구니에는 CART_CODE가 하나가 아닌 여러개가 있다. 

이때 사용할 수 있는 것이 LIST이다. 

cartDTO에 LIST<String>cartCodeList를 만들고,

getter와 setter를 만들어준다.(cartCode 하나를 출력하기에 변수String)

 

또한, in(A, B, C)를 활용해서 충족되는 데이터만 삭제하도록 한다.

 

<delete id="deleteCarts">
DELETE SHOP_CART 
WHERE CART_CODE IN
<!-- cartDTO.getCartCodeList(); -->
<foreach collection="cartCodeList" item="cartCode" open="(" close=")" separator=", ">

(cartCodeList에서 하나를 뽑았을 때 cartCode라고 할 것이고 첫시작할 때 (를 넣고,

하나의 쿼리 실행이 끝나면 , 를 실행할 것이고, 최종 쿼리가 끝나면 )를 넣겠다)

#{cartCode}
</foreach>
</delete>

 

2. 인터페이스 메소드 작성

@Override
public void deleteCarts(CartDTO cart) {
	sqlSession.delete("cartMapper.deleteCarts", cart);
	sqlSession.commit();

}

 

3. JS로 FORM태그 실행하기

1) jsp

 

우리는 체크박스에서 cartCode 데이터를 가져와야 하는데

이미 value로 itemCode를 가져가도록 설정이 되어 있다.

이때 데이터를 하나 더 추가할 수 있는 방법이 있다.

data-임의 이름(소문자로 작성 /대문자를 넣어도 js가면 소문자로 나옴) ="${cartCode}" 

-> 니가 이 속성을 쓴다면 데이터 담고 넘길 수 있어

data-cartcode ="${cart.cartCode}"  -> cartcode로 출력된다.

또는, data-cart-code 출력 시 cartCode로 나온다.

 

<input data-cart-code ="${cart.cartCode }" 또는 data-cartcode="${cart.cartCode }"

 type="checkbox" class="chk" value="${cart.itemCode}">

<form action="deleteCartItem.ca" method="post" style="display: inline-block;">
<input type="hidden" id="cartCode" value="" name="cartCode">
</form>
<input type="button" value="선택삭제" onClick="deleteItem();">

 

2) js 작성

 

function deleteItem(){

(체크박스의 갯수가 하나가 아니기 때문에 selectorAll을 사용하며, 

체크박스 중 체크된 박스의 값만 구할것이기 때문에 input태그에서 사용하던

checked를 똑같이 사용한다. 또한, 갯수를 구할 것이기 때문에 .length를 사용한다.)
const checkedCnt = document.querySelectorAll('.chk:checked').length;


i) 선택된 체크박스가 없다면
if(checkedCnt ==0){
alert('선택된 상품이 없습니다. 다시 선택해주세요.')
return;  (return을 사용하여 if문 마무리 시킨것)
}

ii) 선택된 체크박스들
const checkedBoxes = document.querySelectorAll('.chk:checked');

let cartCodes = '';   (cartCodes는 cartCode들을 받을 것이고, 변하는 값이기에 let 사용)

(★foreach문을 사용해준다)
for(const checkBox of checkedBoxes ){
(checkedBoxes을 하나 꺼냈을 때 checkBox라고 하겠다)
const cartCode = checkBox.dataset.cartcode;

(jsp에서 넘긴 데이터 받을 때, dataset.보낸이름으로 받는다)
cartCodes = cartCodes + cartCode + ',';   (데이터 구분을 위해서 , 사용)
}
document.querySelector('#cartCode').value = cartCodes.substr(0, cartCodes.length -1);

(cartCodes에서 하나 추가때마다 ,을 추가했기에 마지막 데이터에도 ,가 추가 되었다.

이를 없애기 위해서 ,를 제거하는 substr 를 사용하였다. js에서도 0부터 시작한다)

document.querySelector('form[action="deleteCartItem.ca"]').submit();



<다른 방법> 

나는 form태그를 사용하여 데이터를 넘겼지만, 다른 방법이 있다.


1. 보낼 데이터 하나라서 input 대신해서 사용 가능 
location.href ='deleteCartItem.ca?cartCode='+cartCodes;
2. 백틱을 이용해서 데이터 넘기기 가능
location.href =`deleteCartItem.ca?cartCodes=${cartCodes}`;

}

 

 

4. CONTROLLER

 else if(command.equals("/deleteCartItem.ca")) {
     String cartCodes = request.getParameter("cartCode");

    ★cartCodes안에 cartCode, cartCode, ... 이렇게 데이터가 들어가 있기에

    배열을 사용하여 하나씩 꺼내는데 배열에는 ,가 필요 없기에 ,를 제거하기 위해서 

    split를 사용한다! split(",") 를 사용하면 ,제거 가능하다.
      String [] cartCodeArr = cartCodes.split(","); 
    

    ★배열을 ArrayList로 바꿔야 할 때 Arrays.asList()를 사용해서 바꿀 수 있다
      List<String> cartCodeList = Arrays.asList(cartCodeArr);
      
      CartDTO cart = new CartDTO();
      cart.setCartCodeList(cartCodeList);
       
       cartService.deleteCarts(cart);