Java Spring Boot JSONの送信と受信のサンプル

nas

Spring BootのJSONの送信と受信のサンプルです。

確認環境
・Windows10
・STS 3.9.6
・JDK 10.0.2
・Spring Boot 2.0.5

目次

環境

今回作成/修正するファイルは以下の赤枠の部分です。

このサンプルの流れ

このサンプルの流れは、以下のとおりです。

１．index.htmlからMainControllerクラスが呼ばれる。
２．MainControllerクラスで、JSONの値をSyainクラスにセットする。
３．MainControllerクラスでSyainクラスにセットされたJSONの値を、コンソールに出力＋index.htmlにJSONを返す。

URLへのアクセス

1-1から1-4の表示は、以下のURLにアクセスします。
http://localhost:8080/test1/index

※Google Chromeのアドレスバーに上記URLを入力するとGET送信になります。コードがPOST送信の場合エラーになります。
テストする時は、curlやツール等でアクセスします。
curlのインストールとJSONを送信するサンプル(Windows10)
Advanced REST client(ARC)のインストールとJSONを送信するサンプル

 

1-1.送信するJSON

以下のJSONを送信します。
左側のキーは、JSONがセットされるクラスの項目名と同じにします。

{
  "bangou": "1",
  "name": "鈴木"
}

 

1-2.JSONの値がセットされるクラス(Syain.java)

JSONの値がセットされるファイルのクラスです。
7,8行目の項目名は、JSONのキーと同じです。

package com.example.demo;
import java.io.Serializable;

public class Syain implements Serializable {
	private static final long serialVersionUID = 1L;
	
	private  String bangou;
	private  String name;
	
	public String getBangou() {
		return bangou;
	}
	public void setBangou(String bangou) {
		this.bangou = bangou;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
}

Eclipse getterとsetterを自動で作成する方法

 

1-3.コントローラのクラス(MainController.java)

コントローラファイルです。

package com.example.demo;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;

@RestController
@RequestMapping("/test1")
public class MainController {

	@RequestMapping(value = "/index", 
			method = {RequestMethod.POST})
	@ResponseBody
	public Syain output1(
			@RequestBody Syain syain) {
				System.out.println(syain.getBangou());
				System.out.println(syain.getName());
				return syain;
	}
}

14行目の@ResponseBodyアノテーションは、コントローラから戻り値を返します。
16行目は、@RequestBodyアノテーションとSyainクラスの型と変数(オブジェクト)です。syainオブジェクトにJSONの値がセットされます。
17,18行目は、コンソールにJSONの値が表示されます。
19行目は、オブジェクトを画面に返します。JSON形式で返ります。

 

1-4.JSONを送信/受信するファイル(index.html)

JSONを送信/受信するファイルです。
リロードする毎にJSONを送信し受信します。

実行するとSTSのコンソールにJSONの値が表示され、index.htmlの画面にサーバから受信したJSONが表示されます。

21行目のcontentTypeは、application/jsonを指定します。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
</head>
<body>
<p id="p1"></p>
<p id="p2"></p>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$("#p1").text("");
$("#p2").text("");
var json1 = {
		  "bangou": "1",
		  "name": "鈴木"
		};
$.ajax({	
	url:"http://localhost:8080/test1/index",
	type:"POST",
	contentType: "application/json",
	data:JSON.stringify(json1),
	dataType:"json"
	}).done(function(data1,textStatus,jqXHR) {
		$("#p1").text(jqXHR.status); //例：200
		$("#p2").text(JSON.stringify(data1));
	}).fail(function(jqXHR, textStatus, errorThrown){
		$("#p1").text(jqXHR.status); //例：404
	}).always(function(){
	});
</script>
</html>

 

2-1.配列のJSONの場合

次は、以下の配列のJSONを送信するサンプルです。

[
    {
        "bangou": "1",
        "name": "鈴木"
    },
    {
        "bangou": "2",
        "name": "田中"
    },
    {
        "bangou": "3",
        "name": "佐藤"
    }
]

以下は、上記のJSONをセットしたindex.htmlです。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
</head>
<body>
<p id="p1"></p>
<p id="p2"></p>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$("#p1").text("");
$("#p2").text("");
var json1 = [
    {
        "bangou": "1",
        "name": "鈴木"
    },
    {
        "bangou": "2",
        "name": "田中"
    },
    {
        "bangou": "3",
        "name": "佐藤"
    }
];
$.ajax({	
	url:"http://localhost:8080/test1/index2",
	type:"POST",
	contentType: "application/json",
	data:JSON.stringify(json1),
	dataType:"json"
	}).done(function(data1,textStatus,jqXHR) {
		$("#p1").text(jqXHR.status);
		$("#p2").text(JSON.stringify(data1));
	}).fail(function(jqXHR, textStatus, errorThrown){
		$("#p1").text(jqXHR.status);
	}).always(function(){
	});
</script>
</html>

URLへのアクセス

2-1から2-2の表示は、以下のURLにアクセスします。
http://localhost:8080/test1/index2

※Google Chromeのアドレスバーに上記URLを入力するとGET送信になります。コードがPOST送信の場合エラーになります。
テストする時は、curlやツール等でアクセスします。
curlのインストールとJSONを送信するサンプル(Windows10)
Advanced REST client(ARC)のインストールとJSONを送信するサンプル

 

2-2.配列のJSONを受けるコントローラのクラス(MainController.java)

配列のJSONを受けるコントローラのクラスです。

package com.example.demo;
import java.util.List;

import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;

@RestController
@RequestMapping("/test1")
public class MainController {

	@RequestMapping(value = "/index2", 
			method = {RequestMethod.POST})
	@ResponseBody
	public List<Syain> output2(
			@RequestBody List<Syain> syain) {
				System.out.println(syain.get(1).getBangou());
				System.out.println(syain.get(1).getName());
				return syain;
	}
}

18行目のList<Syain> syainは、配列のJSONを受け取ります。

実行するとコンソールに、2　田中と表示されます。
index.htmlには、以下のJSONが表示されます。

[{"bangou":"1","name":"鈴木"},{"bangou":"2","name":"田中"},{"bangou":"3","name":"佐藤"}]

参考：
Spring MVCのコントローラでの戻り値いろいろ

関連の記事

Java Spring Bootでhello worldを表示するサンプル
Java Spring Boot フォームの値を別画面に渡すサンプル
Java Spring Boot MySQLに接続してselectするサンプル(JPA)
Java Spring Boot DI(依存性の注入)のサンプル
Java Spring Boot AOPのサンプル

△上に戻る