[Spring] AJAX로 화면에 뷰 템플릿 추가하기

 

비동기로 화면에 JSP 파일 추가하기

화면에서 버튼을 눌렀을 때 새로운 요소가 보이게 하는 방법은 여러 가지가 있습니다.

이 번에는 스프링, 스프링부트 프로젝트에서 비동기로 뷰 템플릿 파일 조각을 불러오는 방법을 정리해 보겠습니다.

 

에러 핸들링과 관련한 내용은 과감히 제외하고 에센셜 한 부분만 정리해 보겠습니다.

클라이언트 요청

먼저 AJAX를 이용해 컨트롤러에 요청을 보내도록 하겠습니다.

각각 순수 자바스크립트와 제이쿼리 구문입니다.

function getHtml(parameters) {
    return fetch('/getHtml.do', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(parameters)
    });
}

function getHtml(parameters) {
    return $.ajax({
        url : `/getHtml.do`
        , dataType: 'html' //반환받는 데이터타입 : html
        , type: "POST"
        , contentType: 'application/json'
        , data : JSON.stringify(parameters)
    })
}

컨트롤러 응답

컨트롤러에서는 요청에 따라 템플릿 파일을 반환해 주도록 하겠습니다.

@PostMapping("/getHtml.do")
public String getHtml(@RequestBody Dto Dto, ModelMap model) throws Exception {
    /** 비즈니스 로직이 필요하다면 추가합니다.**/
    return "/htmlTemplate";
}

스크립트

반환받은 템플릿을 화면 필요한 곳에 붙여줍니다. 

각각 순수 자바스크립트와 제이쿼리 구문입니다.

async function getHtmlAndAppend() {
    try {
        const html = await getHtml();
        document.body.insertAdjacentHTML('beforeend', html);
    } catch (error) {
        console.error("Error: ", error);
    }
}

async function getHtmlAndAppend() {
    try {
        const html = await getHtml();
        $(body).append(html);
    } catch (error) {
        console.error("Error: ", error);
    }
}

 

감사합니다!