Consume Spring HATEOAS Rest API using JQuery Ajax example | Spring Boot

In this tutorial, JavaSampleApproach shows you a Spring Boot example that consumes Spring HATEOAS Rest API using JQuery Ajax.

Related Post: Spring HATEOAS Rest API + JQuery Ajax POST/GET example | Spring Boot

I. Overview

1. Goal

We’ll build a Spring Boot Application in that:
HATEOAS REST Service provides interface for interacting with Customer Database.
– Client calls API by using JQuery Ajax GET, retrieves and displays:
+ Customer Data (Id, Name) with HATEOAS Links by CustomerId.
+ Order Data for Customer above.

2. Technology

– Java 1.8
– Maven 3.3.9
– Spring Tool Suite – Version 3.8.4.RELEASE
– Spring Boot: 1.5.4.RELEASE

3. Project Structure

consume-spring-hateoas-ajax-structure

HATEOAS REST Service:
+ Customer class extends Spring HATEOAS ResourceSupport.
+ CustomerRepository provides repository methods and custom finder methods for CustomerController to interact with Customer database.
+ CustomerController is a REST Controller which has request mapping methods for RESTful requests such as:
/{id}, /{id}/orders, /getcustomer/{id}
+ Response class defines structure for returned data of HTTP GET.

For more details about creating HATEOAS REST Service, please visit:
How to start Spring HATEOAS RestAPI with Spring Boot

JQuery Ajax:
+ home.jsp contains elements for GET request and display results.
+ ajax() GET methods in get.js Javascript file.
+ WebController maps url to home.jsp page.

For more simple example about JQuery Ajax POST/GET, please visit:
How to integrate JQuery Ajax POST/GET & Spring MVC | Spring Boot

– Configuration for JSP page and static resources in application.properties
– Dependencies for Spring HATEOAS, WEB MVC, Tomcat in pom.xml

To know how to make application work with JSP page and static resources, please visit:
How to start with JSP page and static resource in Spring Boot

II. Practice

1. Create Spring Boot project

– Using Spring Tool Suite/Eclipse to create Project (WAR packaging), ServletInitializer and SpringBootApplication class will be created automatically.
– Add Dependencies to pom.xml file:

2. Create Data Model Classes

3. Create Message Model Class

4. Create Repository Class

5. Create Controller Classes

6. Configuration for JSP Page and Static Resources

Add these lines to application.properties file:

7. Add JSP Page and Javascript File

Under src/main/webapp/WEB-INF/jsps folder, add:

Under src/main/webapp/js folder, add:

8. Run & Check Result

– Config maven build:
clean install
– Run project with mode Spring Boot App.
– Open Browser, enter URL:
http://localhost:8080/
consume-spring-hateoas-ajax-request

– Fill customerID & press Get Customer button.
Customer information with Links and Order Information will appear:
consume-spring-hateoas-ajax-result

III. Source Code

SpringBootAjaxConsumeHATEOAS


Related Posts


Got Something To Say:

Your email address will not be published. Required fields are marked *

*