[thymeleaf] 비동기 화면 갱신 (feat.fetch)

 

 

 

---

---

 

 

 

[thymeleaf] Expression Utility 로 데이터 백분율 row 추가하기.

 

 

이전 포스트에서 thymeleaf 로 데이터 테이블을 가공해서 뷰에 그려줬는데

이번엔 검색 필터로 조회할때마다 값을 비동기적으로 업데이트 하고자 했다.

 

일반적으로는 ajax 나 fetch 를 사용해서 서버로 부터 값을 받아와

성공 결과로직에서 갱신할 엘리먼트를 지우고 다시 그려주거나 했다.

 

 

간단한 엘리먼트 갱신은 문제 없으나

화면에 요소가 많으면 매우 불편하다.

 

 

 

하지만 아래의 방법으로 간단하게 기존 thymeleaf 코드를 건들지 않고도 적용할 수 있다.

 

 

 

 

 

 

---

기존 코드,

 

@Controller
@RequiredArgsConstructor
public class YearStatController {
    
    private final YearStatService yearStatService;
    
    @PostMapping("/chartView")
    public String yearChartView(Model model) {
      model.addAttribute("tableData", yearStatService.getTableData(YEAR));
      return "statistics/yearchart";
    }
}

 

기존에는 컨트롤러에서 /chartView 를 호출하면

Model 객체에 tableData 라는 이름으로 데이터를 담아서  yearchart.html 뷰에 전달해줬고

 

...

<table id="tableStat" class="table table-bordered table-actions default outer">
    <thead>
      <tr>
        <th>구분</th>
        ...
      </tr>
    </thead>
    <tbody>
      <th:block th:each="data : ${tableData}">
        <tr>
          <td th:text="${data.type}"></td>
          <td th:text="${#numbers.formatInteger(data.m01, 1, 'COMMA')}"></td>
		  ...
        </tr>
      </th:block>
    </tbody>			
</table>

...

 

yearchart.html 에서는 반복으로 그려줄 곳에 thymeleaf 의 each 구문을 사용하여 데이터를 그려주었다.

 

여기까지는 정적인 페이지이다.

 

 

 

 

---

추가코드,

 

@Controller
@RequiredArgsConstructor
public class YearStatController {
    
    private final YearStatService yearStatService;
    
    @PostMapping("/chartView")
    public String yearChartView(Model model) {
      return "statistics/yearchart";
    }
    
    @PostMapping("/getYearTable")
    public String getYearTable(Model model, @RequestBody int YEAR) {
      model.addAttribute("tableData", yearReserveStatService.getTableData(YEAR));
      return "statistics/yearchart :: #tableStat";
    }
}

 

스크립트에서 비동기 호출을 하기위해 post  컨트롤러를 하나 추가하고

return 을  뷰페이지의 엘리먼트 테이블 id 를 지정해줬다.

그럼 이제 viewResolver 는 #tableStat id의 엘리먼트를 셋팅하여 전달해줄 것이다.

 

fetch('/getYearTable', {
  method: 'post',
  headers: {'Content-Type': 'application/json'},
  body: JSON.stringify(YEAR)
}).then(response => response.text())
  .then(html => {
        $('#tableStat').replaceWith(html);
});

 

fetch 구문에서 보통 json 형태로 받아서 처리하는데

컨트롤러에서 뷰를 던져줬으므로  text로 받아서

replaceWith 로 엘리먼트를 치환한다.

 

(* 원래 ajax 로 많이 써서 jquery를 혼용해서 작성했습니다.  fetch 대신 ajax를 쓰셔도 됩니다. )

 

 

 

 

 

---

---

 

 

참고블로그

 

[Thymeleaf] ajax를 이용해 비동기식 화면 수정 - Chaelin's Blog

AJAX로 화면 내용 바꾸기