「Spring Boot」ajax通信でjsonデータを送信する方法
1.jsonを送信する
ajax通信形式
$.ajax({
url:xxx,
type:"POST",
略
})
.done(function(data,textStatus,jqXHR)){
//処理コード
})
.fail(function (jqXHR, textStatus, errorThrown) {
//処理コード
})
.always(function () {});
$.ajax({
url:xxx,
type:"POST",
略
})
.done(function(data,textStatus,jqXHR)){
//処理コード
})
.fail(function (jqXHR, textStatus, errorThrown) {
//処理コード
})
.always(function () {});
$.ajax({
url:xxx,
type:"POST",
略
})
.done(function(data,textStatus,jqXHR)){
//処理コード
})
.fail(function (jqXHR, textStatus, errorThrown) {
//処理コード
})
.always(function () {});
使用例
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
</head>
<body>
<div id="result"></div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$("#result").text("");
//jsonデータの初期化
var userJson = {
depname: "開発部",
job: "システム開発",
addr: "新宿オフィス"
};
//ajax送信
$.ajax({
url: "http://127.0.0.1:8788/user/reguser", //送信URL
type: "POST",
contentType: "application/json", //コンテンツタイプ
data: JSON.stringify(userJson),
dataType: "json", //データタイプjson
})
.done(function (data, textStatus, jqXHR) {
$("#result").text(JSON.stringify(data));
})
.fail(function (jqXHR, textStatus, errorThrown) {
$("#result").text(jqXHR.status);
})
.always(function () {});
</script>
</html>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
</head>
<body>
<div id="result"></div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$("#result").text("");
//jsonデータの初期化
var userJson = {
depname: "開発部",
job: "システム開発",
addr: "新宿オフィス"
};
//ajax送信
$.ajax({
url: "http://127.0.0.1:8788/user/reguser", //送信URL
type: "POST",
contentType: "application/json", //コンテンツタイプ
data: JSON.stringify(userJson),
dataType: "json", //データタイプjson
})
.done(function (data, textStatus, jqXHR) {
$("#result").text(JSON.stringify(data));
})
.fail(function (jqXHR, textStatus, errorThrown) {
$("#result").text(jqXHR.status);
})
.always(function () {});
</script>
</html>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
</head>
<body>
<div id="result"></div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$("#result").text("");
//jsonデータの初期化
var userJson = {
depname: "開発部",
job: "システム開発",
addr: "新宿オフィス"
};
//ajax送信
$.ajax({
url: "http://127.0.0.1:8788/user/reguser", //送信URL
type: "POST",
contentType: "application/json", //コンテンツタイプ
data: JSON.stringify(userJson),
dataType: "json", //データタイプjson
})
.done(function (data, textStatus, jqXHR) {
$("#result").text(JSON.stringify(data));
})
.fail(function (jqXHR, textStatus, errorThrown) {
$("#result").text(jqXHR.status);
})
.always(function () {});
</script>
</html>
2.jsonの値を格納するクラスの定義
package com.arkgame.study;
import java.io.Serializable;
public class User implements Serializable {
private static final long serialVersionUID = 1L;
private String depname;
private String job;
private String addr;
//get set略
package com.arkgame.study;
import java.io.Serializable;
public class User implements Serializable {
private static final long serialVersionUID = 1L;
private String depname;
private String job;
private String addr;
//get set略
package com.arkgame.study;
import java.io.Serializable;
public class User implements Serializable {
private static final long serialVersionUID = 1L;
private String depname;
private String job;
private String addr;
//get set略
3.コントローラの定義
package com.arkgame.study;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;
//アノテーションRestController
//RequestMappingを指定
@RestController
@RequestMapping("/user")
public class UserController {
//コントローラから戻り値を返す
@PostMapping("/reguser")
@ResponseBody
public User getuserInfo(@RequestBody User user) {
//コンソールにjsonの値(depname)を表示
String depname = user.getDepname();
System.out.println(depname);
//オブジェクトを画面に返す
return user;
}
}
package com.arkgame.study;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;
//アノテーションRestController
//RequestMappingを指定
@RestController
@RequestMapping("/user")
public class UserController {
//コントローラから戻り値を返す
@PostMapping("/reguser")
@ResponseBody
public User getuserInfo(@RequestBody User user) {
//コンソールにjsonの値(depname)を表示
String depname = user.getDepname();
System.out.println(depname);
//オブジェクトを画面に返す
return user;
}
}
package com.arkgame.study;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;
//アノテーションRestController
//RequestMappingを指定
@RestController
@RequestMapping("/user")
public class UserController {
//コントローラから戻り値を返す
@PostMapping("/reguser")
@ResponseBody
public User getuserInfo(@RequestBody User user) {
//コンソールにjsonの値(depname)を表示
String depname = user.getDepname();
System.out.println(depname);
//オブジェクトを画面に返す
return user;
}
}
4.動作確認
http://127.0.0.1:8788/user/
結果 {“depname":"開発部","job":"システム開発","addr":"新宿オフィス"}
コンソール画面に下記を表示
開発部