Web系開発メモ

Java, JavaScript, CSS, HTML などの記事を書いています。

SpringBoot入門:jQueryでJSONを受信

Spring Boot の Webアプリで、jQuery を使って JSON を受け取る方法を書きます。JSON は、記事「JSONを返す」のコントローラから取得します。

前提

この記事は、入門記事「JSONを返す」の資源(ビルドファイル、クラス等)を利用しています。必要に応じて参照して頂けると嬉しいです。

手順1. 画面の作成

HTML を作成して、script タグに jQuery を使う処理を書きます。

gssb/src/main/resources/public/jquery-ajax.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hello jQuery</title>
</head>
<body>
<div>
  <span class="label">Message : </span>
  <span class="message"></span>
</div>
</body>
<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<script type="text/javascript">
// JSON を取得して .message に表示。
$(function() {
  $.ajax({
    url: '/hello',
    method: 'get',
    cache: false
  }).then(function(data) {
    $('.message').text(data.message);
  });
});
</script>
</html>

HTML(静的コンテンツ)の置き場所は、記事「静的コンテンツを返す」に書いてあります。

手順2. 起動

次のコマンドでアプリを起動します。

gssb > mvn spring-boot:run

手順3. 確認

ブラウザで http://localhost:8080/jquery-ajax.html にアクセスして、次のように表示されれば成功です。

Message : Hello, World!

ソースコード

gssb - GitHub
※ プロジェクト名の gssb は、Getting Started Spring Boot の略です。