Ajax처리를 통한 즐겨찾기 갯수 나타내주기 / 더보기 버튼만들기 (JavaScript, Ajax, Spring)

Ajax처리를 통해 즐겨찾기 갯수 나타내기

&

더보기 버튼 만들기

최종 프로젝트 진행하면서 부족한 나의 머리로 조금은 애먹었던 부분이다.

위시리스트를 나타내어 주는건데, 시/구 정도까지 나눈뒤에 그 분류별로 메인에 나타내어 주고, 

클릭해주면 그 안에 그 지역의 숙소들이 들어가게끔 구현하는 부분이었는데, Ajax를 능숙하게 사용하지 못할 때여서 조금 애먹었었다.

대략의 코드를 보면,

<script>
        $(document).ready(function() {
            var wishList = $('.wishAddress');
            var arr = [];
            for (var i = 0; i < wishList.length; i++) {
                arr.push($("input[name='address']").eq(i).val());
            }
 
            var jsonInfo = JSON.stringify(arr);
 
            for (var j = 0; j < wishList.length; j++) {
                $("span[id='idx']").eq(j).addClass("wishIdx" + j);
            }
 
            $.ajax({
                type : 'post',
                url : '${pageContext.request.contextPath}/wishCnt',
                contentType : 'application/json',
                data : jsonInfo,
                success : function(response) {
                    var obj = JSON.parse(response);
                    $.each(obj, function(key, val) {
                        for (var i = 0; i < wishList.length; i++) {
                            var loc = $("input[name='address']").eq(i).val();
                            if (loc == key) {
                                $('.wishIdx' + i).text(val);
                            }
                        }
                    });
                }
            });
        });
</script>

이렇게 처리해주게 되는데, DB에서 나의 위시리스트를 가져오고, view단에서 forEach문을 통해 각각의 DIV를 만들어 뿌려주고,

각각의 주소는 다시 스크립트단에서 배열에 담아주게 된다! 그리구 그 배열은 JSON타입의 문자열로 바꿔준다!

음 두번째 for문은 각각 위시리스트 갯수를 담아줄 span태크에 클래스를 추가해주는 코드다!

ajax 부분을 보게되면 post방식으로 컨트롤러로 넘기게 되고, 이때, data를 json타입의 문자열로 바꿔준 주소배열을 보내주게되는데,

 이 데이터는 컨트롤러에서 @RequestBody List<String> list <-- 이것으로 받아주게 되는것이다 ★★중요 

이때 ajax에서 데이터를 한글로 받아오기 때문에 한글이 깨지지 않게하기 위해

produces = "application/text; charset=utf8"을 추가해주면 한글이 깨지지 않게 된당~~

    @RequestMapping(value="/wishCnt", produces = "application/text; charset=utf8")
    @ResponseBody
    public String wishCnt(HttpSession session, @RequestBody List<String> list, Model model) throws JsonProcessingException {
        
        Map<String, Integer> addressMap = new HashMap<String, Integer>();
        ObjectMapper mapper = new ObjectMapper();
        
        String address = "";
        int idx = 0;
        UserVO user = (UserVO) session.getAttribute("loginUser");
        
        for(int i = 0; i< list.size(); i++) {
            address = list.get(i);
            idx = service.wishDivCnt(user.getUserId(), address);
            addressMap.put(address, idx);
        }
    
        String jsonWish = mapper.writerWithDefaultPrettyPrinter().writeValueAsString(addressMap);
        return jsonWish;
    }

mapper.writerWithDefaultPrettyPrinter().writeValueAsString(addressMap);

이것은 json데이터를 보기좋게 포맷팅해서 스트링으로 변환해주는 코드이다.

그리고 여기서 return되는 데이터를 @ResponsBody를 통해 ajax에서 받을 수 있는 것!

            $.ajax({

                type : 'post',

                url : '${pageContext.request.contextPath}/wishCnt',

                contentType : 'application/json',

                data : jsonInfo,

                success : function(response) {

                    var obj = JSON.parse(response);

                    $.each(obj, function(key, val) {

                        for (var i = 0; i < wishList.length; i++) {

                            var loc = $("input[name='address']").eq(i).val();

                            if (loc == key) {

                                $('.wishIdx' + i).text(val);

                            }

                        }

                    });

ajax부분을 다시 보게 되면, response로 controller에서 받아온 데이터를 처리해준다!

받아온 데이터를 다시 json형식으로 바꿔주고 $.each를 통해 key에 저장된 주소값과 div에 지정되어있는 주소값이 일치하면 span태그안에 즐겨찾기 수를 넣어주게 되는 코드이다!

누군가가 본다면 조금은 복잡한 코드라고 생각할 수 있겠지만 아직은 이정도가 나의 최대치정도,, 같다

나중에 더 열심히 공부를해서 코드를 보완하게 된다면 다시 수정하겠다! 아직은 이게 최선인것같음!!!

그리고 나는 더보기버튼을 이용해서 메인페이지에 6개씩 나타내어주고 더보기버튼을 누르면 6개씩 더 나타내어주고,

만약에 나타내어줄게 없다면 더보기버튼이 나타나지 않게 해주었다!

$(function() {
            $(".wishDiv").slice(0, 6).show(); // 최초 6개 선택
            $("#load").click(function(e) { // Load More를 위한 클릭 이벤트e
                e.preventDefault();
                $(".wishDiv:hidden").slice(0, 6).show(); // 숨김 설정된 다음 6개를 선택하여 표시
                if ($(".wishDiv:hidden").length == 0) { // 숨겨진 DIV가 있는지 체크
                    $('#load').css('display', 'none');// 더 이상 로드할 항목이 없는 경우
                }
            });
        });

.wishDiv 의 default css는 display:none 으로 지정해두었다.

#load의 경우는 더보기 버튼의 id값!

더보기버튼은 위에 코드만 보면 간단하게 처리할 수 있으므로 더이상의 설명은 생략!

더 좋은 의견이나 수정할 부분, 오타가 있으면 댓글로 알려주세요~^_^

활용하시려면 댓글 부탁드립니당 ㅎㅎㅎ~!!