Thymeleaf Java에서 넘어온 객체 값 Javascript로 전송

Java Controller에서 ModelMap을 사용하여 넘긴 데이터를 Thymeleaf html 및 Javascript에서 사용하기

 

- Java

위 이미지와 같이 Thymeleaf의 prefix, suffix에 의해 return String으로 설정하고 view name을 일치 시키면

해당 view로 데이터가 넘어간다. 데이터를 설정하기 위해 ModelMap을 파라미터로 지정한다.

 

ModelMap 의 메소드 중 addAttribute를 사용하여 데이터를 지정할 수 있다.

 

@RequestMapping(value = "/main")
public String main(ModelMap map, HttpServletRequest request) throws IOException {

    HashMap<String, Object> m = new HashMap<String, Object>();
    m.put("test", "data");
    map.addAttribute("menuList", m);

    return "contents/reporter/main";
}

 

ModelMap의 addAttribute 메서드를 통해 데이터를 지정하면 return viewname 파일 안에서 데이터를 사용할 수 있다.

 

- View Html

 

예시로 보여드리는 코드이다. Java ModelMap을 통해 넘긴 menuList 데이터는 Thymeleaf Html View에서

"${menuList}" 구문 형식으로 사용한다.

 

- View Javascript

 

위 이미지는 View Html 내의 Javascript 에서 ModelMap을 통해 넘어온 데이터를 사용하기 위한 방법이다.

넘어온 데이터를 사용하기 위한 문법은 [[${ModelMap Key 이름}]] 방식으로 사용한다. 또한 script 태그에 Thymeleaf 속성으로 th:inline을 사용해서 작성하길 권장한다.

 

넘어온 json 데이터의 문자열 큰 따옴표를 자동으로 지정해준다. 만약 th:inline 속성을 사용하지 않고

Java에서 넘어온 객체를 사용할 경우 아래와 같이 큰 따옴표 깨짐 에러가 발생한다.

 

th:inline 속성을 사용하지 않을때는 "[[${ModelMap Key 이름}]]" 방식으로 사용한다. th:inline 속성을 사용 했을 때는

큰 따옴표("")를 붙이지 않았지만 사용하지 않을때는 붙여줘야 한다.

 

위 이미지와 같이 Json 형태인 Object를 넘겨 받았지만 큰 따옴표("")가 변환되는 걸 볼 수 있다.

 

th:inline="javascript" 속성을 사용하면 알아서 따옴표를 추가해주기 때문에 편리하게 사용할 수 있다.

또한 해당 객체가 javascript에서 문제가 될 수 있는 문자가 포함되어 있으면 이스케이프 처리도 해준다.

 

Thymeleaf 의 javascript inline 속성은 아래와 같은 객체들을 자동으로 객체화 해준다.

- Strings

- Numbers

- Booleans

- Arrays

- Collections

- Maps

- Beans