ajax를 사용하여 jstl을 사용하여 양방향 바인딩처럼 사용하고 싶을 때(vue처럼)

vue를 하다보면 axios를 사용하여 비동기로 데이터를 가져와서, 그 데이터를 v-model을 사용하여 table의 데이터를 비동기적으로 조작할 수 있었다.

vue를 사용하지 않고 jsp에서 ajax로 데이터는 가져왔는데.. 이 데이터를 현재 for문을 사용하여 테이블에 데이터가 있는데 이걸 어떻게 조작할까?

결론부터 말하면 현재 페이지 이외의 다른 jsp파일을 생성하여 현재 페이지에서 그려주고 싶었던 테이블을 그대로 작성한 뒤 jsp페이지를 리턴으로 불러와 제이쿼리의 .html을 사용하여 내용을 바꾸는 것이다.

 

 

1. 컨트롤러

 => 쿼리를 사용하여 데이터를 가져온 뒤 모델로 넘겨준다. 넘기는 page는 test페이지다.

 

    @RequestMapping(value = "/user/friendList{type}")
    public String friendList(Model model, HttpServletResponse response, Auth auth, @PathVariable String type) {
        Relationship relationship = new Relationship();
        if(type.equals("send")) {
            relationship.setSendId(auth.getId());
        }
        if(type.equals("get")) {
            relationship.setGetId(auth.getId());
        }
        List<Relationship> relationshipList = relationshipService.selectRelationshipList(relationship);
        model.addAttribute("dataList", relationshipList);
        return "test";
    }

2. test.jsp (가상의 데이터와 태그들을 만들어놓는다, 나중에 이 jsp페이지를 현재 내가보여주고 싶은 페이지에 .html로 그려줄 것이다.)  

 

<p id="indexListAjax">
    <c:forEach var="item" items="${dataList}" varStatus="status" >
        <div class="col-lg-6 col-xl-4">
            <div class="card mb-5 mb-xl-0">
                <div class="card-body p-5">
                    <div class="mb-3">
                        <img class="card-img-top" src="${item.imgUrl}" alt="..." />
                    </div>
                    <ul class="list-unstyled mb-4">
                        <div class="small">
                            <div class="fw-bold">${item.nickname}, ${item.age}</div>
                            <div class="text-muted">${item.job},${item.purpose}</div>
                        </div>
                        <li class="mb-2">
                            <i class="bi bi-check text-primary"></i>
                            <strong>1 users</strong>
                        </li>
                        <li class="mb-2">
                            <i class="bi bi-check text-primary"></i>
                            5GB storage
                        </li>
                        <li class="mb-2">
                            <i class="bi bi-check text-primary"></i>
                            Unlimited public projects
                        </li>
                        <li class="mb-2">
                            <i class="bi bi-check text-primary"></i>
                            Community access
                        </li>
                        <li class="mb-2">
                            <i class="bi bi-check text-primary"></i>
                            Unlimited private projects
                        </li>
                        <li class="mb-2">
                            <i class="bi bi-check text-primary"></i>
                            Dedicated support
                        </li>
                        <li class="mb-2">
                            <i class="bi bi-check text-primary"></i>
                            Free linked domain
                        </li>
                        <li class="text-muted">
                            <i class="bi bi-check text-primary"></i>
                            Monthly status reports
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </c:forEach>
</p>

 

3.사용자에게 보여줄 화면 jsp

 

        <div class="row gy-xl-5 justify-content" id="gogetit">
        </div>
       
       <script>
       
        $.ajax({
            type : 'get',
            url : "/user/friendList/" + type,,
            data : params,
            success : function(data) { // 결과 성공 콜백함수
				$('#gogetit').html(data);
            },
            error : function(request, status, error) { // 결과 에러 콜백함수
                console.log("error", error)
            }
        });
        </script>

 

 

sned버튼, get버튼이 있을 때, send를 눌렀을 때 send타입의 데이터를 보여줄 수 있고, get버튼을 눌렀을 때 get버튼의 데이터를 보여줄 수 있다.

 

 

https://my-t-space.tistory.com/47