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

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

Related Posts:
How to start Spring HATEOAS RestAPI with Spring Boot
How to integrate JQuery Ajax POST/GET & Spring MVC | Spring Boot
How to start with JSP page and static resources in Spring Boot
Consume Spring HATEOAS Rest API using JQuery Ajax 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 POST/GET:
+ POST: submit new Order for specific Customer by CustomerId (assume that we have had Customer Database before: 3 customers, we just add new Order information).
+ GET: retrieve Customer Data (Id, Name, Orders List) by CustomerId

When displaying Customer Data for HTTP GET, our application can also show links to current Customer and its Orders.

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

spring-hateoas-ajax-post-get-structure

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

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

JQuery Ajax POST/GET:
+ home.jsp contains form and elements for submitting POST/GET request.
+ ajax() POST/GET methods in get.js, post.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 Classes

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 Files

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/
spring-hateoas-ajax-post-get-browser

POST: fill customerID & Order
spring-hateoas-ajax-post-get-post-request

Press Submit, new line appears:
spring-hateoas-ajax-post-get-post-request-result

GET:
Fill customerID & press Get Customer button. Customer information with Links will appear:
spring-hateoas-ajax-post-get-request-result

Click Self Link:

Click Orders Link:

If we add new Order, for example: Tablet, then click Self Link:

III. Source Code

SpringBootAjaxHATEOAS

By JavaSampleApproach | June 14, 2017.


Related Posts


Got Something To Say:

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

*