Spring HATEOAS Rest API + JQuery Ajax POST/GET example | Spring Boot
Tags: springboot, hateoas, jquery, ajax
Published: 2021-05-04 13:03:10

https://grokonez.com/spring-framework/spring-mvc/spring-hateoas-rest-api-jquery-ajax-example-spring-boot

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

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

Related Posts:
- <a href="https://grokonez.com/spring-framework/spring-boot/how-to-start-spring-hateoas-restapi-with-spring-boot">How to start Spring HATEOAS RestAPI with Spring Boot</a>
- <a href="https://grokonez.com/spring-framework/spring-boot/integrate-jquery-ajax-post-get-spring-boot-web-service">How to integrate JQuery Ajax POST/GET & Spring MVC | Spring Boot</a>
- <a href="https://grokonez.com/spring-framework/spring-boot/how-to-start-with-jsp-page-and-static-resource-in-spring-boot">How to start with JSP page and static resources in Spring Boot</a>
- <a href="https://grokonez.com/spring-framework/spring-boot/consume-spring-hateoas-rest-api-using-jquery-ajax-example-spring-boot">Consume Spring HATEOAS Rest API using JQuery Ajax example | Spring Boot</a>

<!--more-->
<h2>I. Overview</h2>
<h3>1. Goal</h3>
We'll build a Spring Boot Application in that:
- <strong>HATEOAS REST Service</strong> provides interface for interacting with <strong><em>Customer</em></strong> Database.
- Client calls API by using <strong>JQuery Ajax POST/GET</strong>:
+ POST: submit new <em><strong>Order</strong></em> for specific <em><strong>Customer</strong></em> by <em><strong>CustomerId</strong></em> (assume that we have had <em><strong>Customer</strong></em> Database before: 3 customers, we just add new <em><strong>Order</strong></em> information).
+ GET: retrieve <em><strong>Customer</strong></em> Data (Id, Name, <em><strong>Order</strong></em>s List) by <em><strong>CustomerId</strong></em>

When displaying <em><strong>Customer</strong></em> Data for HTTP GET, our application can also show links to current <em><strong>Customer</strong></em> and its <em><strong>Orders</strong></em>.
<h3>2. Technology</h3>
- Java 1.8
- Maven 3.3.9
- Spring Tool Suite – Version 3.8.4.RELEASE
- Spring Boot: 1.5.4.RELEASE
<h3>3. Project Structure</h3>
<img src="https://grokonez.com/wp-content/uploads/2017/06/spring-hateoas-ajax-post-get-structure.png" alt="spring-hateoas-ajax-post-get-structure" width="319" height="543" class="alignnone size-full wp-image-6065" />

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

<div class="jsa-quote">
For more details about creating HATEOAS REST Service, please visit:
<a href="https://grokonez.com/spring-framework/spring-boot/how-to-start-spring-hateoas-restapi-with-spring-boot">How to start Spring HATEOAS RestAPI with Spring Boot</a> 
</div>
- <strong>JQuery Ajax POST/GET</strong>:
+ <strong>home.jsp</strong> contains form and elements for submitting POST/GET request.
+ <code>ajax()</code> POST/GET methods in <strong>get.js</strong>, <strong>post.js</strong> Javascript file.
+ <code>WebController</code> maps url to <strong>home.jsp</strong> page.

<div class="jsa-quote">
For more simple example about JQuery Ajax POST/GET, please visit:
<a href="https://grokonez.com/spring-framework/spring-boot/integrate-jquery-ajax-post-get-spring-boot-web-service">How to integrate JQuery Ajax POST/GET & Spring MVC | Spring Boot</a>
</div>
- Configuration for <em>JSP page</em> and <em>static resources</em> in <strong>application.properties</strong>
- Dependencies for Spring HATEOAS, WEB MVC, Tomcat in <strong>pom.xml</strong>

<div class="jsa-quote">
To know how to make application work with JSP page and static resources, please visit:
<a href="https://grokonez.com/spring-framework/spring-boot/how-to-start-with-jsp-page-and-static-resource-in-spring-boot">How to start with JSP page and static resource in Spring Boot</a>
</div>
<h2>II. Practice</h2>
<h3>1. Create Spring Boot project</h3>
- Using <strong>Spring Tool Suite</strong>/<strong>Eclipse</strong> to create Project (<strong>WAR</strong> packaging), <strong>ServletInitializer</strong> and <strong>SpringBootApplication</strong> class will be created automatically.
- Add Dependencies to <strong>pom.xml</strong> file:

More at:

https://grokonez.com/spring-framework/spring-mvc/spring-hateoas-rest-api-jquery-ajax-example-spring-boot

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