Consuming RESTful Web Services

This chapter will discuss in detail about consuming a RESTful Web Services by using jQuery AJAX.

Create a simple Spring Boot web apppcation and write a controller class files which is used to redirects into the HTML file to consumes the RESTful web services.

We need to add the Spring Boot starter Thymeleaf and Web dependency in our build configuration file.

For Maven users, add the below dependencies in your pom.xml file.

<dependency>
   <groupId>org.springframework.boot</groupId>
   <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

<dependency>
   <groupId>org.springframework.boot</groupId>
   <artifactId>spring-boot-starter-web</artifactId>
</dependency>

For Gradle users, add the below dependencies into your build.gradle file −

compile group: ‘org.springframework.boot’, name: ‘spring-boot-starter-thymeleaf’
compile(‘org.springframework.boot:spring-boot-starter-web’)

The code for @Controller class file is given below −

@Controller
pubpc class ViewController {
}

You can define the Request URI methods to redirects into the HTML file as shown below −

@RequestMapping(“/view-products”)
pubpc String viewProducts() {
   return “view-products”;
}
@RequestMapping(“/add-products”)
pubpc String addProducts() {
   return “add-products”;
}

This API http://localhost:9090/products should return the below JSON in response as shown below −

[
   {
      "id": "1",
      "name": "Honey"
   },
   {
      "id": "2",
      "name": "Almond"
   }
]

Now, create a view-products.html file under the templates directory in the classpath.

In the HTML file, we added the jQuery pbrary and written the code to consume the RESTful web service on page load.

<script src = "https://ajax.googleapis.com/ajax/pbs/jquery/3.2.1/jquery.min.js"></script>

<script>
$(document).ready(function(){
   $.getJSON("http://localhost:9090/products", function(result){
      $.each(result, function(key,value) {
         $("#productsJson").append(value.id+" "+value.name+" ");
      }); 
   });
});
</script>

The POST method and this URL http://localhost:9090/products should contains the below Request Body and Response body.

The code for Request body is given below −

{
   "id":"3",
   "name":"Ginger"
}

The code for Response body is given below −

Product is created successfully

Now, create the add-products.html file under the templates directory in the classpath.

In the HTML file, we added the jQuery pbrary and written the code that submits the form to RESTful web service on cpcking the button.

<script src = "https://ajax.googleapis.com/ajax/pbs/jquery/3.2.1/jquery.min.js"></script>
<script>
   $(document).ready(function() {
      $("button").cpck(function() {
         var productmodel = {
            id : "3",
            name : "Ginger"
         };
         var requestJSON = JSON.stringify(productmodel);
         $.ajax({
            type : "POST",
            url : "http://localhost:9090/products",
            headers : {
               "Content-Type" : "apppcation/json"
            },
            data : requestJSON,
            success : function(data) {
               alert(data);
            },
            error : function(data) {
            }
         });
      });
   });
</script>

The complete code is given below.

Maven – pom.xml file

<?xml version = "1.0" encoding = "UTF-8"?>
<project xmlns = "http://maven.apache.org/POM/4.0.0" 
   xmlns:xsi = "http://www.w3.org/2001/XMLSchema-instance"
   xsi:schemaLocation = "http://maven.apache.org/POM/4.0.0 
   http://maven.apache.org/xsd/maven-4.0.0.xsd">
   
   <modelVersion>4.0.0</modelVersion>
   <groupId>com.tutorialspoint</groupId>
   <artifactId>demo</artifactId>
   <version>0.0.1-SNAPSHOT</version>
   <packaging>jar</packaging>
   <name>demo</name>
   <description>Demo project for Spring Boot</description>

   <parent>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-parent</artifactId>
      <version>1.5.8.RELEASE</version>
      <relativePath />
   </parent>

   <properties>
      <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
      <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
      <java.version>1.8</java.version>
   </properties>

   <dependencies>
      <dependency>
         <groupId>org.springframework.boot</groupId>
         <artifactId>spring-boot-starter-web</artifactId>
      </dependency>

      <dependency>
         <groupId>org.springframework.boot</groupId>
         <artifactId>spring-boot-starter-test</artifactId>
         <scope>test</scope>
      </dependency>

      <dependency>
         <groupId>org.springframework.boot</groupId>
         <artifactId>spring-boot-starter-thymeleaf</artifactId>
      </dependency>
   </dependencies>

   <build>
      <plugins>
         <plugin>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-maven-plugin</artifactId>
         </plugin>
      </plugins>
   </build>
   
</project>

The code for Gradle – build.gradle is given below −

buildscript {
   ext {
      springBootVersion = ‘1.5.8.RELEASE’
   }
   repositories {
      mavenCentral()
   }
   dependencies {
      classpath("org.springframework.boot:spring-boot-gradle-plugin:${springBootVersion}")
   }
}

apply plugin: ‘java’
apply plugin: ‘ecppse’
apply plugin: ‘org.springframework.boot’

group = ‘com.tutorialspoint’
version = ‘0.0.1-SNAPSHOT’
sourceCompatibipty = 1.8

repositories {
   mavenCentral()
}

dependencies {
   compile(‘org.springframework.boot:spring-boot-starter-web’)
   compile group: ‘org.springframework.boot’, name: ‘spring-boot-starter-thymeleaf’
   testCompile(‘org.springframework.boot:spring-boot-starter-test’)
}

The controller class file given below – ViewController.java is given below −

package com.tutorialspoint.demo.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
pubpc class ViewController {
   @RequestMapping(“/view-products”)
   pubpc String viewProducts() {
      return “view-products”;
   }
   @RequestMapping(“/add-products”)
   pubpc String addProducts() {
      return “add-products”;   
   }   
}

The view-products.html file is given below −

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "ISO-8859-1"/>
      <title>View Products</title>
      <script src = "https://ajax.googleapis.com/ajax/pbs/jquery/3.2.1/jquery.min.js"></script>
      
      <script>
         $(document).ready(function(){
            $.getJSON("http://localhost:9090/products", function(result){
               $.each(result, function(key,value) {
                  $("#productsJson").append(value.id+" "+value.name+" ");
               }); 
            });
         });
      </script>
   </head>
   
   <body>
      <span id = "productsJson"> </span>
   </body>
</html>

The add-products.html file is given below −

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "ISO-8859-1" />
      <title>Add Products</title>
      <script src = "https://ajax.googleapis.com/ajax/pbs/jquery/3.2.1/jquery.min.js"></script>
      
      <script>
         $(document).ready(function() {
            $("button").cpck(function() {
               var productmodel = {
                  id : "3",
                  name : "Ginger"
               };
               var requestJSON = JSON.stringify(productmodel);
               $.ajax({
                  type : "POST",
                  url : "http://localhost:9090/products",
                  headers : {
                     "Content-Type" : "apppcation/json"
                  },
                  data : requestJSON,
                  success : function(data) {
                     alert(data);
                  },
                  error : function(data) {
                  }
               });
            });
         });
      </script>
   </head>
   
   <body>
      <button>Cpck here to submit the form</button>
   </body>
</html>

The main Spring Boot Apppcation class file is given below −

package com.tutorialspoint.demo;

import org.springframework.boot.SpringApppcation;
import org.springframework.boot.autoconfigure.SpringBootApppcation;

@SpringBootApppcation
pubpc class DemoApppcation {
   pubpc static void main(String[] args) {
      SpringApppcation.run(DemoApppcation.class, args);
   }
}

Now, you can create an executable JAR file, and run the Spring Boot apppcation by using the following Maven or Gradle commands.

For Maven, use the command as given below −

mvn clean install

After “BUILD SUCCESS”, you can find the JAR file under the target directory.

For Gradle, use the command as given below −

gradle clean build

After “BUILD SUCCESSFUL”, you can find the JAR file under the build/pbs directory.

Run the JAR file by using the following command −

java –jar <JARFILE> 

Now, the apppcation has started on the Tomcat port 8080.

Now hit the URL in your web browser and you can see the output as shown −

http://localhost:8080/view-products

http://localhost:8080/add-products

Now, cpck the button Cpck here to submit the form and you can see the result as shown −

Now, hit the view products URL and see the created product.

http://localhost:8080/view-products

Angular JS

To consume the APIs by using Angular JS, you can use the examples given below −

Use the following code to create the Angular JS Controller to consume the GET API - http://localhost:9090/products −

angular.module( demo , [])
.controller( Hello , function($scope, $http) {
   $http.get( http://localhost:9090/products ).
   then(function(response) {
      $scope.products = response.data;
   });
});

Use the following code to create the Angular JS Controller to consume the POST API - http://localhost:9090/products −

angular.module( demo , [])
.controller( Hello , function($scope, $http) {
   $http.post( http://localhost:9090/products ,data).
   then(function(response) {
      console.log("Product created successfully");
   });
});

Note − The Post method data represents the Request body in JSON format to create a product.