SpringブートAjaxの例
この記事では
jQuery.ajax`を使ってHTMLフォーム要求を
Spring REST API`に送り、JSONレスポンスを返す方法を説明します。
使用されるツール:
-
春のブート1.5.1.RELEASE
-
Spring 4.3.6.RELEASE
-
Maven 3
-
jQuery
-
ブートストラップ3
1.プロジェクトの構成
標準のMavenプロジェクト構造。
プロジェクトの依存関係
通常のSpring Boot依存性といくつかの `webjars`リソースです。
pom.xml
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4__0__0.xsd"> <modelVersion>4.0.0</modelVersion> <groupId>com.mkyong</groupId> <artifactId>spring-boot-ajax-example</artifactId> <packaging>jar</packaging> <version>1.0</version> <parent> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-parent</artifactId> <version>1.5.1.RELEASE</version> </parent> <properties> <java.version>1.8</java.version> </properties> <dependencies> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-devtools</artifactId> <optional>true</optional> </dependency> <dependency> <groupId>org.webjars</groupId> <artifactId>jquery</artifactId> <version>2.2.4</version> </dependency> <dependency> <groupId>org.webjars</groupId> <artifactId>bootstrap</artifactId> <version>3.3.7</version> </dependency> </dependencies> <build> <plugins> <!-- Package as an executable jar/war --> <plugin> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-maven-plugin</artifactId> </plugin> </plugins> </build> </project>
3. Spring REST API
3.1 RESTコントローラ。SearchCriteriaを受け取り、 `ResponseEntity`を返します。
SearchController.java
package com.mkyong.controller; import com.mkyong.model.AjaxResponseBody; import com.mkyong.model.SearchCriteria; import com.mkyong.model.User; import com.mkyong.services.UserService; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.http.ResponseEntity; import org.springframework.validation.Errors; import org.springframework.web.bind.annotation.PostMapping; import org.springframework.web.bind.annotation.RequestBody; import org.springframework.web.bind.annotation.RestController; import javax.validation.Valid; import java.util.List; import java.util.stream.Collectors; @RestController public class SearchController { UserService userService; @Autowired public void setUserService(UserService userService) { this.userService = userService; } @PostMapping("/api/search") public ResponseEntity<?> getSearchResultViaAjax( @Valid @RequestBody SearchCriteria search, Errors errors) { AjaxResponseBody result = new AjaxResponseBody(); //If error, just return a 400 bad request, along with the error message if (errors.hasErrors()) { result.setMsg(errors.getAllErrors() .stream().map(x -> x.getDefaultMessage()) .collect(Collectors.joining(","))); return ResponseEntity.badRequest().body(result); } List<User> users = userService.findByUserNameOrEmail(search.getUsername()); if (users.isEmpty()) { result.setMsg("no user found!"); } else { result.setMsg("success"); } result.setResult(users); return ResponseEntity.ok(result); } }
3.2いくつかのPOJO。
AjaxResponseBody.java
package com.mkyong.model; import java.util.List; public class AjaxResponseBody { String msg; List<User> result; //getters and setters }
User.java
package com.mkyong.model; public class User { String username; String password; String email; public User(String username, String password, String email) { this.username = username; this.password = password; this.email = email; } //getters and setters }
3.3検証。
SearchCriteria.java
package com.mkyong.model; import org.hibernate.validator.constraints.NotBlank; public class SearchCriteria { @NotBlank(message = "username can't empty!") String username; public String getUsername() { return username; } public void setUsername(String username) { this.username = username; } }
3.4検索のために一部のユーザーを初期化するサービス。
UserService.java
package com.mkyong.services; import com.mkyong.model.User; import org.springframework.stereotype.Service; import javax.annotation.PostConstruct; import java.util.ArrayList; import java.util.List; import java.util.stream.Collectors; @Service public class UserService { private List<User> users; //Love Java 8 public List<User> findByUserNameOrEmail(String username) { List<User> result = users.stream() .filter(x -> x.getUsername().equalsIgnoreCase(username)) .collect(Collectors.toList()); return result; } //Init some users for testing @PostConstruct private void iniDataForTesting() { users = new ArrayList<User>(); User user1 = new User("mkyong", "password111", "[email protected]"); User user2 = new User("yflow", "password222", "[email protected]"); User user3 = new User("laplap", "password333", "[email protected]"); users.add(user1); users.add(user2); users.add(user3); } }
3.5スプリングブートスターター。
UserService.java
package com.mkyong; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; @SpringBootApplication public class SpringBootWebApplication { public static void main(String[]args) throws Exception { SpringApplication.run(SpringBootWebApplication.class, args); } }
4. HTML形式のjQuery Ajax
4.1ブートストラップで装飾されたシンプルなHTMLフォーム。
ajax.html
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <title>Spring Boot ajax example</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <link rel="stylesheet" type="text/css" href="webjars/bootstrap/3.3.7/css/bootstrap.min.css"/> </head> <body> <nav class="navbar navbar-inverse"> <div class="container"> <div class="navbar-header"> <a class="navbar-brand" href="#">Mkyong.com</a> </div> </div> </nav> <div class="container" style="min-height: 500px"> <div class="starter-template"> <h1>Spring Boot AJAX Example</h1> <div id="feedback"></div> <form class="form-horizontal" id="search-form"> <div class="form-group form-group-lg"> <label class="col-sm-2 control-label">Username</label> <div class="col-sm-10"> <input type="text" class="form-control" id="username"/> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <button type="submit" id="bth-search" class="btn btn-primary btn-lg">Search </button> </div> </div> </form> </div> </div> <div class="container"> <footer> <p> © <a href="/">Mkyong.com</a> 2017 </p> </footer> </div> <script type="text/javascript" src="webjars/jquery/2.2.4/jquery.min.js"></script> <script type="text/javascript" src="js/main.js"></script> </body> </html>
4.2 HTMLフォームを取得し、JSON形式でJSON形式に変換し、 `jQuery.ajax`を介してPOSTリクエストを送信します。
main.js
$(document).ready(function () { $("#search-form").submit(function (event) { //stop submit the form, we will post it manually. event.preventDefault(); fire__ajax__submit(); }); }); function fire__ajax__submit() { var search = {} search["username"]= $("#username").val(); $("#btn-search").prop("disabled", true); $.ajax({ type: "POST", contentType: "application/json", url: "/api/search", data: JSON.stringify(search), dataType: 'json', cache: false, timeout: 600000, success: function (data) { var json = "<h4>Ajax Response</h4><pre>" + JSON.stringify(data, null, 4) + "</pre>"; $('#feedback').html(json); console.log("SUCCESS : ", data); $("#btn-search").prop("disabled", false); }, error: function (e) { var json = "<h4>Ajax Response</h4><pre>" + e.responseText + "</pre>"; $('#feedback').html(json); console.log("ERROR : ", e); $("#btn-search").prop("disabled", false); } }); }
完了しました。
デモ
5.1 Springブートを開始する
ターミナル
$ mvn spring-boot:run . ________ __ ____ __ __ /\\/______'__ ____ __ __(__)__ ____ ____ __ \ \ \ \ ( ( )\______ | '__ | '__| | '__ \/__` | \ \ \ \ \\/ ______)| |__)| | | | | || (__| | ) ) ) ) ' |________| .____|__| |__|__| |__\____, |//// =========|__|==============|______/=/__/__/__/ :: Spring Boot :: (v1.5.1.RELEASE) 2017-02-03 14:56:36 DEBUG com.mkyong.SpringBootWebApplication - Running with Spring Boot v1.5.1.RELEASE, Spring v4.3.6.RELEASE 2017-02-03 14:56:36 INFO com.mkyong.SpringBootWebApplication - No active profile set, falling back to default profiles: default 2017-02-03 14:56:39 INFO com.mkyong.SpringBootWebApplication - Started SpringBootWebApplication in 2.828 seconds (JVM running for 3.295)
5.2アクセス
http://localhost:8080/
5.3ユーザー名が空の場合
5.4ユーザー名が見つからない場合!
5.5ユーザー名が見つかった場合!
6.ソースコードをダウンロードする
ダウンロード:
spring-boot-ajax-example.zip
(10 KB)
参考文献
-
https://spring.io/guides/gs/rest-service/
[Spring IO – ビルド
RESTfulなWebサービス]。
https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global__Objects/JSON/stringify
[MDN
-
JSON.stringify()]。リンク://spring-mvc/spring-4-mvc-ajax-hello-world-example/[Spring 4 MVC
Ajax Hello Worldの例]