How to integrate JQuery Ajax POST/GET & Spring MVC

In this tutorial How to integrate JQuery Ajax POST/GET & Spring Boot Web Service, Grokonez will show you how to exchange data between Web client and Spring Boot Web Services.

Contents

I. Technologies for JQuery Ajax POST/GET & Spring Boot tutorial
II. Overview
- 1. Project Structure
- 2. Step to do
III. Practices
IV. Sourcecode

I. Technologies for JQuery Ajax POST/GET & Spring Boot tutorial

– Java 1.8
– Maven 3.3.9
– Spring Tool Suite – Version 3.8.1.RELEASE
– JQuery
– BootStrap
– Spring Boot – 1.5.7.RELEASE

II. Overview

1. Project Structure

jquery ajax post get spring boot - project structure

In How to integrate JQuery Ajax POST/GET & Spring Boot Web Service, we create 2 Ajax requests: POST & GET

2. Step to do

– Create Spring Boot project
– Create simple model
– Create simple Response message
– Create Web Controller to provide web views
– Create RestController for POST & GET requests
– Create an index.html view
– Create Ajax POST & GET requests
– Run & Check results

III. Practices

1. Create a Spring Boot project

– Open Spring Tool Suite, on main menu, choose File->New->Spring Starter Project, add project info, then press Next for needed dependencies:
For Template Engines, choose Thymeleaf
For Web MVC, choose Web->Web

jquery ajax post get spring boot - dependencies

Open pom.xml file and check needed dependencies:

<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>

<groupId>org.springframework.boot</groupId>

<artifactId>spring-boot-starter-thymeleaf</artifactId>

</dependency>

<groupId>org.springframework.boot</groupId>

<artifactId>spring-boot-starter-web</artifactId>

</dependency>

2. Create simple model

Create a Customer model:

package com.javasampleapproach.jqueryajax.model;

public class Customer {
    private String firstname;
    private String lastname;
     
    public Customer(){}
     
    public Customer(String firstname, String lastname){
        this.firstname = firstname;
        this.lastname = lastname;
    }
     
    // firstname
    public String getFirstname() {
        return firstname;
    }
    public void setFirstname(String firstname) {
        this.firstname = firstname;
    }
     
    // lastname
    public String getLastname() {
        return lastname;
    }
    public void setLastname(String lastname) {
        this.lastname = lastname;
    }
}

package com.javasampleapproach.jqueryajax.model;

public class Customer {

private String firstname;

private String lastname;

public Customer(){}

public Customer(String firstname, String lastname){

this.firstname = firstname;

this.lastname = lastname;

}

// firstname

public String getFirstname() {

return firstname;

}

public void setFirstname(String firstname) {

this.firstname = firstname;

}

// lastname

public String getLastname() {

return lastname;

}

public void setLastname(String lastname) {

this.lastname = lastname;

}

3. Create simple Response message

Create a simple message: Response

package com.javasampleapproach.jqueryajax.message;

public class Response {
	private String status;
	private Object data;
	
	public Response(){
		
	}
	
	public Response(String status, Object data){
		this.status = status;
		this.data = data;
	}

	public String getStatus() {
		return status;
	}

	public void setStatus(String status) {
		this.status = status;
	}

	public Object getData() {
		return data;
	}

	public void setData(Object data) {
		this.data = data;
	}
}

package com.javasampleapproach.jqueryajax.message;

public class Response {

private String status;

private Object data;

public Response(){

}

public Response(String status, Object data){

this.status = status;

this.data = data;

}

public String getStatus() {

return status;

}

public void setStatus(String status) {

this.status = status;

}

public Object getData() {

return data;

}

public void setData(Object data) {

this.data = data;

}

4. Create Web Controller to provide web views

package com.javasampleapproach.jqueryajax.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
 
@Controller
public class WebController {
	
    @GetMapping(value="/")
    public String homepage(){
        return "index";
    }
}

package com.javasampleapproach.jqueryajax.controller;

import org.springframework.stereotype.Controller;

import org.springframework.web.bind.annotation.GetMapping;

@Controller

public class WebController {

@GetMapping(value="/")

public String homepage(){

return "index";

}

5. Create RestController for POST & GET requests

package com.javasampleapproach.jqueryajax.controller;

import java.util.ArrayList;
import java.util.List;

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import com.javasampleapproach.jqueryajax.message.Response;
import com.javasampleapproach.jqueryajax.model.Customer;

@RestController
@RequestMapping("/api/customer")
public class RestWebController {

	List<Customer> cust = new ArrayList<Customer>();

	@GetMapping(value = "/all")
	public Response getResource() {
		Response response = new Response("Done", cust);
		return response;
	}

	@PostMapping(value = "/save")
	public Response postCustomer(@RequestBody Customer customer) {
		cust.add(customer);
		
		// Create Response Object
		Response response = new Response("Done", customer);
		return response;
	}
}

package com.javasampleapproach.jqueryajax.controller;

import java.util.ArrayList;

import java.util.List;

import org.springframework.web.bind.annotation.GetMapping;

import org.springframework.web.bind.annotation.PostMapping;

import org.springframework.web.bind.annotation.RequestBody;

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

import org.springframework.web.bind.annotation.RestController;

import com.javasampleapproach.jqueryajax.message.Response;

import com.javasampleapproach.jqueryajax.model.Customer;

@RestController

@RequestMapping("/api/customer")

public class RestWebController {

List<Customer> cust = new ArrayList<Customer>();

@GetMapping(value = "/all")

public Response getResource() {

Response response = new Response("Done", cust);

return response;

}

@PostMapping(value = "/save")

public Response postCustomer(@RequestBody Customer customer) {

cust.add(customer);

// Create Response Object

Response response = new Response("Done", customer);

return response;

}

6. Create index.html view

Simple index.html is created with Bootstrap & Thymeleaf

<!DOCTYPE HTML>
 
<html>
<head>
	  <title>Spring Boot - AJAX POST GET Example</title>
	  <meta charset="utf-8" />
	  <meta name="viewport" content="width=device-width, initial-scale=1" />
	  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
	  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
	  <script src="/js/postrequest.js"></script>
      <script src="/js/getrequest.js"></script>
	  
</head>
<body>
 
<div class="container">
 
	<h3 style="color:blue">POST-GET AJAX Example</h3>
	
	<div>
		<form class="form-inline" style="margin:20px 20px 20px 20px" id="customerForm">
			<div class="form-group">
				<label for="firstname" style="margin-right:5px">FirstName:</label>
				<input type="text" class="form-control" id="firstname" placeholder="Enter FirstName"/>
			</div>
			<div class="form-group">
				<label for="lastname" style="margin-left:20px; margin-right:5px">LastName:</label>
				<input type="text" class="form-control" id="lastname" placeholder="Enter LastName"/>
			</div>
			<button type="submit" class="btn btn-default" style="margin-left:20px; margin-right:5px">Submit</button>
		</form>
	</div>
	
	<div class="col-sm-7" id="postResultDiv">
	</div>
	
	<div class="col-sm-7" style="margin:20px 0px 20px 0px">
		<button id="getAllCustomerId" type="button" class="btn btn-primary">Get All Customers</button>
		<div id="getResultDiv" style="padding:20px 10px 20px 50px">
	        <ul class="list-group">
	    	</ul>
    	</div>
	</div>
	
</div>
</body>
</html>

<!DOCTYPE HTML>

<html>

<head>

<title>Spring Boot - AJAX POST GET Example</title>

</head>

<body>

<h3 style="color:blue">POST-GET AJAX Example</h3>

<div>

<label for="firstname" style="margin-right:5px">FirstName:</label>

</div>

<label for="lastname" style="margin-left:20px; margin-right:5px">LastName:</label>

</div>

<button type="submit" class="btn btn-default" style="margin-left:20px; margin-right:5px">Submit</button>

</form>

</div>

</div>

<button id="getAllCustomerId" type="button" class="btn btn-primary">Get All Customers</button>

</ul>

</div>

</body>

</html>

MultipartFile – How to create Spring Ajax MultipartFile application to download/upload files | SpringBoot + JQuery Ajax + Bootstrap.

7. Create Ajax POST & GET JavaScript

– Create a POST request by JQuery Ajax in postrequest.js file:

$( document ).ready(function() {
	
	// SUBMIT FORM
    $("#customerForm").submit(function(event) {
		// Prevent the form from submitting via the browser.
		event.preventDefault();
		ajaxPost();
	});
    
    
    function ajaxPost(){
    	
    	// PREPARE FORM DATA
    	var formData = {
    		firstname : $("#firstname").val(),
    		lastname :  $("#lastname").val()
    	}
    	
    	// DO POST
    	$.ajax({
			type : "POST",
			contentType : "application/json",
			url : window.location + "api/customer/save",
			data : JSON.stringify(formData),
			dataType : 'json',
			success : function(result) {
				if(result.status == "Done"){
					$("#postResultDiv").html("<p style='background-color:#7FA7B0; color:white; padding:20px 20px 20px 20px'>" + 
												"Post Successfully! <br>" +
												"---> Customer's Info: FirstName = " + 
												result.data.firstname + " ,LastName = " + result.data.lastname + "</p>");
				}else{
					$("#postResultDiv").html("<strong>Error</strong>");
				}
				console.log(result);
			},
			error : function(e) {
				alert("Error!")
				console.log("ERROR: ", e);
			}
		});
    	
    	// Reset FormData after Posting
    	resetData();

    }
    
    function resetData(){
    	$("#firstname").val("");
    	$("#lastname").val("");
    }
})

$( document ).ready(function() {

// SUBMIT FORM

$("#customerForm").submit(function(event) {

// Prevent the form from submitting via the browser.

event.preventDefault();

ajaxPost();

});

function ajaxPost(){

// PREPARE FORM DATA

var formData = {

firstname : $("#firstname").val(),

lastname : $("#lastname").val()

}

// DO POST

$.ajax({

type : "POST",

contentType : "application/json",

url : window.location + "api/customer/save",

data : JSON.stringify(formData),

dataType : 'json',

success : function(result) {

if(result.status == "Done"){

$("#postResultDiv").html("<p style='background-color:#7FA7B0; color:white; padding:20px 20px 20px 20px'>" +

"Post Successfully! <br>" +

"---> Customer's Info: FirstName = " +

result.data.firstname + " ,LastName = " + result.data.lastname + "</p>");

}else{

$("#postResultDiv").html("<strong>Error</strong>");

}

console.log(result);

error : function(e) {

alert("Error!")

console.log("ERROR: ", e);

}

});

// Reset FormData after Posting

resetData();

}

function resetData(){

$("#firstname").val("");

$("#lastname").val("");

}

})

– Create a GET request by JQuery Ajax in getrequest.js:

$( document ).ready(function() {
	
	// GET REQUEST
	$("#getAllCustomerId").click(function(event){
		event.preventDefault();
		ajaxGet();
	});
	
	// DO GET
	function ajaxGet(){
		$.ajax({
			type : "GET",
			url : window.location + "api/customer/all",
			success: function(result){
				if(result.status == "Done"){
					$('#getResultDiv ul').empty();
					var custList = "";
					$.each(result.data, function(i, customer){
						var customer = "- Customer with Id = " + i + ", firstname = " + customer.firstname + ", lastName = " + customer.lastname + "<br>";
						$('#getResultDiv .list-group').append(customer)
			        });
					console.log("Success: ", result);
				}else{
					$("#getResultDiv").html("<strong>Error</strong>");
					console.log("Fail: ", result);
				}
			},
			error : function(e) {
				$("#getResultDiv").html("<strong>Error</strong>");
				console.log("ERROR: ", e);
			}
		});	
	}
})

$( document ).ready(function() {

// GET REQUEST

$("#getAllCustomerId").click(function(event){

event.preventDefault();

ajaxGet();

});

// DO GET

function ajaxGet(){

$.ajax({

type : "GET",

url : window.location + "api/customer/all",

success: function(result){

if(result.status == "Done"){

$('#getResultDiv ul').empty();

var custList = "";

$.each(result.data, function(i, customer){

var customer = "- Customer with Id = " + i + ", firstname = " + customer.firstname + ", lastName = " + customer.lastname + "<br>";

$('#getResultDiv .list-group').append(customer)

});

console.log("Success: ", result);

}else{

$("#getResultDiv").html("<strong>Error</strong>");

console.log("Fail: ", result);

}

error : function(e) {

$("#getResultDiv").html("<strong>Error</strong>");

console.log("ERROR: ", e);

}

});

}

})

8. Run & Check results

Build & Run project with Spring Boot mode.
Results:

jquery ajax post get spring boot results

IV. Sourcecode

SpringBootJQueryAjaxClient

By grokonez | January 17, 2017.

Last updated on March 18, 2019.

12 thoughts on “How to integrate JQuery Ajax POST/GET & Spring MVC | Spring Boot”

Soumya says:
April 14, 2017 at 6:26 pm
after clicking on getAllCustomer its not fetching data
1. javasampleapproachco says:
  April 15, 2017 at 3:15 am
  Please check out the video:
  https://youtu.be/pZamJ34AUr8
anvar says:
September 26, 2017 at 2:45 pm
how to describe the starting class. main
1. JavaSampleApproach says:
  September 27, 2017 at 4:59 am
  You can download sourcecode and see the main class in it.
  It was generated automatically by SpringToolSuite.
Mark says:
November 11, 2017 at 7:39 pm
I’m having difficulty understanding what the URL value should be.
In your sample code you have it as:
url : window.location + “api/customer/save”,
I understand where you are getting api/customer/save but am unsure as to what window.location is. In addition I don’t understand exactly what the goal is for the URL statement.
Thanks
1. JavaSampleApproach says:
  November 12, 2017 at 12:59 pm
  Hi Mark,
  window.location is used to get the current page address (URL).
  In the case, you can NOT use it.
  Regards,
  JSA
raja says:
January 3, 2018 at 1:44 pm
If we want to print response of restrequest in another jsp page. How it is possible please tell me.
1. JavaSampleApproach says:
  January 5, 2018 at 3:56 am
  Hi Raja,
  You can do it! You can use JSP or Thymeleaf view technologies to render data model on server side then returns response with html data to browser.
  Regards,
  JSA
  1. Malith says:
    March 10, 2018 at 8:31 pm
    how can i clear the arraylist just because i need only last record
Rob says:
May 30, 2018 at 4:15 pm
The token?
frz says:
June 11, 2018 at 6:22 pm
good example but you not used thymeleaf in that please post with thymeleaf code
SaiKrishna Anumula says:
August 16, 2018 at 5:26 pm
what does \all and \save url came unlike customer which is class name. can we give any name and use it same in ajax?
if add /all to browser link will it work as get request and /save for post with out typing button.

How to integrate JQuery Ajax POST/GET & Spring MVC | Spring Boot

I. Technologies for JQuery Ajax POST/GET & Spring Boot tutorial

II. Overview

1. Project Structure

2. Step to do

III. Practices

1. Create a Spring Boot project

2. Create simple model

3. Create simple Response message

4. Create Web Controller to provide web views

5. Create RestController for POST & GET requests

6. Create index.html view

7. Create Ajax POST & GET JavaScript

8. Run & Check results

IV. Sourcecode

Post Tags

12 thoughts on “How to integrate JQuery Ajax POST/GET & Spring MVC | Spring Boot”

Got Something To Say: Cancel reply

I. Technologies for JQuery Ajax POST/GET & Spring Boot tutorial

II. Overview

1. Project Structure

2. Step to do

III. Practices

1. Create a Spring Boot project

2. Create simple model

3. Create simple Response message

4. Create Web Controller to provide web views

5. Create RestController for POST & GET requests

6. Create index.html view

7. Create Ajax POST & GET JavaScript

8. Run & Check results

IV. Sourcecode

Related Posts

Post Tags

12 thoughts on “How to integrate JQuery Ajax POST/GET & Spring MVC | Spring Boot”

Got Something To Say: Cancel reply