【Java】SpringMVC DBから取得したデータをJSON形式でjspに渡す

2019年10月21日 17:05

Java側でDBから取得したデータを、jspに渡してJavascriptで使いたい。

pom.xml（Mavenの場合）
→jacksonを追加

<!-- https://mvnrepository.com/artifact/org.codehaus.jackson/jackson-mapper-asl -->
<dependency>
    <groupId>org.codehaus.jackson</groupId>
    <artifactId>jackson-mapper-asl</artifactId>
    <version>1.9.13</version>
</dependency>

<!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-databind -->
<dependency>
    <groupId>com.fasterxml.jackson.core</groupId>
    <artifactId>jackson-databind</artifactId>
    <version>2.10.0</version>
</dependency>

Controller
→JavaのコントローラからJSにオブジェクトを渡すメソッドを定義

@Controller
public class AppRestController {

    //JavaのコントローラからJSにオブジェクトを渡すメソッド
    @RequestMapping(value = "/getJSON", method = RequestMethod.GET)
    @ResponseBody //リターンしたオブジェクトをJSONで解釈できる文字列に自動変換してくれる
    public List<ExpenditureAndIncome> getJSON() throws Exception{

    	//DBからリストの取得
        //DBの情報をリストで取得するfindAllメソッドを別で定義。ここでは割愛。
    	List<Item> itemList = itemDao.findAll();

        //取得したリストを返却
    	//コントローラ側で返却するオブジェクトは、JSON文字列ではなく、JavaオブジェクトのままでOK
    	//サーバからクライアントへ返却する過程で、JacksonのマッパーがJSON文字列に変換してくれる
    	return itemList;
    }

}

JSP（test.jsp）
→DBデータをAjaxで受け取り

<%@ page pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
	<div class="wrapper">
		<div class="container">
			<h1>test</h1>
		</div><!-- /container -->
	</div><!-- /wrapper -->

        <!--JS使えるように読み込み-->
	<script src="https://code.jquery.com/jquery-3.4.1.min.js"
					integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
					crossorigin="anonymous"></script>
        
        <!-- controllerからJson取得 -->
	<script type="text/javascript">
		$(function sample() {
			$.ajax({
				type : "GET",
				url : "getJSON", // リクエストURL
				dataType : "json",
				cache : false,
                                //成功時
				success : function(data, status, xhr) {
					alert("success");
					console.log(data);
				},
                                //失敗時
				error : function(XMLHttpRequest, status, errorThrown) {
					alert("fail:" + XMLHttpRequest);
					alert("status:" + status);
				}
			});
		});
	</script>

</body>
</html>

このtest.jspを起動するURLにアクセスしたら、ajax通信でControllerのgetJsonメソッドが実行され、Json形式のitemListがdataに格納されて戻ってくる。

成功時の実行内容としてconsole.log(data);としているため、取得したdataがブラウザのコンソールに表示される。

あとはこれをJavaScriptで使っていくだけ。

この記事が気に入ったらサポートをしてみませんか？