본문으로 바로가기
반응형

Html

파일명 : index.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%> <%@ taglib prefix="c"
uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    </head>
    <div id="test">
        <h3></h3>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
        $(function () {

        });
    </script>
</html>

Javascript

<script>
    $(function () {

    });
</script>

위 스크립트 사이에 아래 스크립트 추가

$.ajax({
    url: "/ajax.do", // 호출할 주소
    data: { name: "jeffrey" } // 넘길 데이터
    dataType: "json", // 데이터 타입 json으로 설정 <- 이걸 안하면 밑에 처럼 JSON.parse를 해야함
    success: function(data) { // 결과 받기
        //data = JSON.parse(data); // JSON 형태로 파싱
        console.log(data);
    }
});

Java

파일명 : TestController.java

@GetMapping(value = "/main.do")
public ModelAndView home() throws Exception {
    // application.yml 에서 jsp 경로를 아래와 같이 설정하였기 때문에
    // spring:
    //  mvc:
    //    view:
    //      prefix: /WEB-INF/sources/jsp/
    //      suffix: .jsp
    // jsp 경로가 현재 src/main/webapp/WEB-INF/sources/jsp/client/index.jsp 이다
    return new ModelAndView("client/index");
}

@GetMapping("/ajax.do")
@ResponseBody
public void ajax(HttpServletResponse response, @RequestParam String name) throws Exception {
    Gson gson = new Gson();

    Map<String, Object> data = new HashMap<String, Object>();

    data.put("rs", "ok");
    data.put("msg", "json data");
    data.put("name", name);

    response.getWriter().print(gson.toJson(data));
}

Spring Boot 시작에 대한 자세한 내용은 아래 링크에서 확인


Gson

pom.xml에 Gson 추가

<!-- https://mvnrepository.com/artifact/com.google.code.gson/gson -->
<dependency>
    <groupId>com.google.code.gson</groupId>
    <artifactId>gson</artifactId>
    <version>2.8.5</version>
</dependency>

실행결과

link -> localhost:8080/main.do

<div id="test">
    <h3></h3>
</div>

위의 h3 태그 안에 html로 실행결과를 뿌렸고 개발자도구 Console에서 JSON 파싱까지 된 결과를 확인

반응형