Exemple de Spring Boot Ajax
Cet article vous montrera comment utiliserjQuery.ajax pour envoyer une demande de formulaire HTML à unSpring REST API et renvoyer une réponse JSON.
Les outils utilisés :
-
Spring Boot 1.5.1.RELEASE
-
Spring 4.3.6.RELEASE
-
Maven 3
-
jQuery
-
Bootstrap 3
Note
Vous pouvez vous intéresser à ce classiqueSpring MVC Ajax example
1. Structure du projet
Une structure de projet Maven standard.

2. Dépendance du projet
Une dépendance Spring Boot normale et certaines ressourceswebjars.
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. API Spring REST
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. Formulaire HTML + jQuery Ajax
4.1 A simple HTML form, decorated with bootstrap.
ajax.html
Spring Boot ajax example
Spring Boot AJAX Example
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);
}
});
}
Terminé.
5. DEMO
5.1 Start Spring Boot
Terminal
$ 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/

5.3 If username is empty!


5.4 If username is not found!

5.5 If username is found!


6. Télécharger le code source
Télécharger -spring-boot-ajax-example.zip (10 KB)