「Spring Boot」ajax通信でjsonデータを送信する方法
1.jsonを送信する
ajax通信形式
$.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>
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略
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; } }
4.動作確認
http://127.0.0.1:8788/user/
結果 {“depname":"開発部","job":"システム開発","addr":"新宿オフィス"}
コンソール画面に下記を表示
開発部