SpringブートAjaxの例

Spring Boot Ajaxの例

この記事では、jQuery.ajaxを使用してHTMLフォームリクエストをSpring REST APIに送信し、JSON応答を返す方法を説明します。

使用ツール：

Spring Boot 1.5.1.RELEASE
Spring 4.3.6.RELEASE
メーベン3
jQuery
ブートストラップ3

Note
この古典的なSpring MVC Ajax exampleに興味があるかもしれません

1. プロジェクト構造

標準のMavenプロジェクト構造。

spring boot ajax example

2. プロジェクトの依存関係

通常のSpringBoot依存関係といくつかのwebjarsリソース。

pom.xml


    4.0.0

    com.example
    spring-boot-ajax-example
    jar
    1.0

    
        org.springframework.boot
        spring-boot-starter-parent
        1.5.1.RELEASE
    

    
        1.8
    

    

        
            org.springframework.boot
            spring-boot-starter-thymeleaf
        

        
            org.springframework.boot
            spring-boot-devtools
            true
        

        
            org.webjars
            jquery
            2.2.4
        

        
            org.webjars
            bootstrap
            3.3.7
        

    

    
        
            
            
                org.springframework.boot
                spring-boot-maven-plugin

3. Spring REST API

3.1 A REST controller, accept a SearchCriteria and return a ResponseEntity

SearchController.java

package com.example.controller;

import com.example.model.AjaxResponseBody;
import com.example.model.SearchCriteria;
import com.example.model.User;
import com.example.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 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 Some POJO.

AjaxResponseBody.java

package com.example.model;

import java.util.List;

public class AjaxResponseBody {

    String msg;
    List result;

    //getters and setters

}

User.java

package com.example.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 Validation.

SearchCriteria.java

package com.example.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 A service to init some users for searching.

UserService.java

package com.example.services;

import com.example.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 users;

    // Love Java 8
    public List findByUserNameOrEmail(String username) {

        List 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 user1 = new User("example", "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 Spring Boot Starter.

UserService.java

package com.example;

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 A simple HTML form, decorated with bootstrap.

ajax.html





    Spring Boot ajax example
    

    




    
        
            Mkyong.com
        
    




    
        Spring Boot AJAX Example

        

        
            
                Username
                
                    
                
            

            
                
                    
                
            
        

    




    
        
            © Mkyong.com 2017

4.2 Get HTML form, convert the search criteria into JSON format via JSON.stringify, and send POST request via jQuery.ajax

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 = "Ajax Response
"
                + JSON.stringify(data, null, 4) + "";
            $('#feedback').html(json);

            console.log("SUCCESS : ", data);
            $("#btn-search").prop("disabled", false);

        },
        error: function (e) {

            var json = "Ajax Response
"
                + e.responseText + "";
            $('#feedback').html(json);

            console.log("ERROR : ", e);
            $("#btn-search").prop("disabled", false);

        }
    });

}

完了しました。

5. DEMO

5.1 Start Spring Boot

ターミナル

$ mvn spring-boot:run

  .   ____          _            __ _ _
 /\\ / ___'_ __ _ _(_)_ __  __ _ \ \ \ \
( ( )\___ | '_ | '_| | '_ \/ _` | \ \ \ \
 \\/  ___)| |_)| | | | | || (_| |  ) ) ) )
  '  |____| .__|_| |_|_| |_\__, | / / / /
 =========|_|==============|___/=/_/_/_/
 :: Spring Boot ::        (v1.5.1.RELEASE)

2017-02-03 14:56:36 DEBUG com.example.SpringBootWebApplication - Running with Spring Boot v1.5.1.RELEASE, Spring v4.3.6.RELEASE
2017-02-03 14:56:36 INFO  com.example.SpringBootWebApplication - No active profile set, falling back to default profiles: default
2017-02-03 14:56:39 INFO  com.example.SpringBootWebApplication - Started SpringBootWebApplication in 2.828 seconds (JVM running for 3.295)

5.2 Access http://localhost:8080/