ajax를 통한 목록의 즐겨찾기 삭제

ajax를 통한 목록의 즐겨찾기 삭제

이번에는 ajax를 통하여 즐겨찾기 목록에있는 여러가지 중에 선택한 한가지만 삭제해주는 비동기처리를 해주는것을 볼것이다.

사진상 하트를 눌러주게되면 해제하겠냐는 alert창이 뜨면서 확인을 누르게되면 비동기처리로 목록에서 사라지게 된다.

일단 코드를 보게되면,

function wishDelete(roomsId, address) {
            var com = confirm('즐겨찾기를 해제하시겠습니까?');
            if(com){
                    $.ajax({
                        url : '${pageContext.request.contextPath}/wishOut?roomsId='
                                + roomsId + '&address=' + address,
                        success : function(data) {
                            if(data[0].length && data[1].length){
                            var address = '${address}';
                            var cont = '';
                            var price = '';
 
                            // data[0][i] -> 룸정보 data[1][i] -> 사진정보
                            cont += '<h2 style="font-weight: 600; text-align: center;"><i class="fas fa-map-marker-alt" style="color: red;"></i>&ensp;'
                                    + address + '</h2><br>';
                            for (var i = 0; i < data[0].length; i++) {
                                var price = (data[0][i].price_weekdays + data[0][i].price_weekend) / 2;
                                cont += '<div class="card" style="margin-bottom: 20px;"><div class="divImg imgTop"style="max-width: 100%; max-height: 350px; overflow: hidden; position:relative;">';
                                cont += '<a href="${pageContext.request.contextPath}/rooms/viewRooms?roomsId='
                                        + data[0][i].roomsId + '">';
                                for (var j = 0; j < data[1].length; j++) {
                                    if (data[0][i].roomsId == data[1][j].roomsId) {
                                        cont += '<img class="card-img-top" src="http://13.209.99.134:8080/imgserver/resources/upload/'
                                                + data[1][j].filename
                                                + '" style="width: 100%; object-fit: contain;">';
                                    }
                                }
                                cont += '</a><div class="top-right" style="position: absolute; top: 8px; right: 8px;">'
                                        + '<button style="border: none; float: right; outline: 0; background-color: Transparent;" id="wishBtn" onclick="wishDelete(\''
                                        + data[0][i].roomsId
                                        + '\',\''
                                        + address
                                        + '\')">'
                                        + '<img id="wishIcon" src="${pageContext.request.contextPath}/resources/images/full2.png" style="width: 35px;"></button></div></div>';
                                cont += '<div class="card-body"><h5 class="card-title"><input type="hidden" value="'+
                                        data[0][i].roomsId + '" class="wishRoomsId" style="width: 30px; border: none; text-align: center;" readonly>';
                                cont += '<a href="${pageContext.request.contextPath}/hostview?hostId='
                                        + data[0][i].hostId
                                        + '"><b>'
                                        + data[0][i].userName
                                        + '</b></a>님의 숙소<br> <span style="font-size: 15px;" class="wsAddress de_add" id="wsAddress">'
                                        + data[0][i].address
                                        + '</span></h5> <span class="card-text" id="price">￦'
                                        + price + ' / 박</span>';
                                if (data[0][i].reviewCount != 0
                                        && data[0][i].avgScope != 0) {
                                    cont += '<span class="card-text">';
                                    for (var k = 1; k < data[0][i].avgScope; k++) {
                                        cont += '<i class="fas fa-star fa-sm" style="color: #FF5A5F;"></i>';
                                    }
                                    cont += '(' + data[0][i].reviewCount
                                            + ')</span>';
                                } else {
                                    cont += '<span class="card-text"><i class="fas fa-exclamation-circle" style="color: red;"></i>후기없음</span>';
                                }
                                cont += '<br> <br> <a href="${pageContext.request.contextPath}/rooms/viewRooms?roomsId='
                                        + data[0][i].roomsId
                                        + '" class="btn" style="background-color: #FF5A5F; color: white; float: right;">보러가기</a></div></div>';
                            }
                            $('.wishListCont').html('');
                            $('.wishListCont').append(cont);
                        } else {
                            location.replace('${pageContext.request.contextPath}/mypage/wish');
                        }
 
                    }
            });
            }
        }

확인을 눌러줬을 경우에만 컨트롤러를 타고 ajax로 목록을 다시 띄워주게 되는 것이다.

만약에 목록이 한개밖에 없었다면 해당 지역은 있는 의미가 없으므로 다시 즐겨찾기 메인화면으로 넘어가게 해주었다.

ajax처리를 통해 컨트롤러를 가게 되는데, 컨트롤러의 코드를 보면,

@RequestMapping(value="/wishOut", method=RequestMethod.GET)
    @ResponseBody
    public List<List> wishOut(HttpSession session, @RequestParam("roomsId") int roomsId, @RequestParam("address") String address) {
        
        ModelAndView modelAndView = new ModelAndView();
        List<List> list = new ArrayList<List>();
        
        UserVO user = (UserVO) session.getAttribute("loginUser");
        service.wishDelete(user.getUserId(), roomsId);
        
        list.add(service.wishList(user.getUserId(), address));
        list.add(service.wishRoomImg(user.getUserId(), address));
        
        return list;
        
    }

즐겨찾기 해제눌러준 해당 숙소 정보를 삭제해준뒤, 유저의 즐겨찾기 목록을 다시 list에 저장해주는 형식이다. 그 list를 반환해주는 컨트롤러이다.

그 결과 값을 받아와 다시 목록을 생성해주는 것.

딱히 어려울 것 없이 간단한 작업이다!