Spring MVCでREST APIを作成して、jQueryでajaxを使用して呼び出す
今回は簡単なGET APIを作成して、それをjQueryのajaxで利用してみます。
できること
% curl http://localhost:8080/greeting
{
"id":1,
"content":"Hello, World!"
}
このAPIを、jQueryのajaxを使用して呼び出し、結果を画面上に埋め込んで表示します。
Jsonの返却
Jsonを返却している箇所は下記のようにしています。
@CrossOrigin @GetMapping("/greeting") public Greeting greeting(@RequestParam(value = "name", defaultValue = "World") String name) { return new Greeting(counter.incrementAndGet(), String.format(template, name)); }
今回はSpringアプリケーションからHTMLを返却するのではなく、HTMLファイルをブラウザで直接開くようにしました。そのため@CrossOriginアノテーションをつけて、別オリジンからのアクセスを許可しています。@CrossOrigin(origins="任意のURL")とすれば、特定のオリジンのみ許可することも可能です。
Jsonの生成
返却するドメインクラスは下記のようにしました。
public class Greeting { @JsonProperty("id") private int id; @JsonProperty("content") private String content; public Greeting(int id, String content) { this.id = id; this.content = content; } }
@JsonPropertyを一つも付けていないとJsonを生成できず、406エラーが返るようになるので注意が必要です。
APIレスポンスの受け取り
下記のようにしてレスポンスを受け取ります。
$(document).ready(() => { $.ajax({ url: "http://localhost:8080/greeting" }).then((data) => { $('.greeting-id').append(data.id) $('.greeting-content').append(data.content) }) })
class名greeting-idとgreeting-contentを持ったHTMLエレメントを用意しておき、レスポンスをそこに埋め込むようにしています。
<div> <p class="greeting-id">The ID is </p> <p class="greeting-content">The content is </p> </div>
動作検証
Springアプリケーションが起動している状態で、public/inde.htmlをブラウザで開きます。
IDとcontentを取得して表示できているのが分かります。
