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

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.

Related Posts:
How to integrate Http Angularjs & Spring Boot
Spring Web MVC – Spring Form Submission | Spring Boot
Jquery Ajax POST-GET Nested Objects to SpringBoot server


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>

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

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

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";
    }
}

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 cust = new ArrayList();

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

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

" + "Post Successfully!
" + "---> Customer's Info: FirstName = " + result.data.firstname + " ,LastName = " + result.data.lastname + "

"); }else{ $("#postResultDiv").html("Error"); } 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 + "
"; $('#getResultDiv .list-group').append(customer) }); console.log("Success: ", result); }else{ $("#getResultDiv").html("Error"); console.log("Fail: ", result); } }, error : function(e) { $("#getResultDiv").html("Error"); 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

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

  1. 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. Hi Mark,

      window.location is used to get the current page address (URL).
      In the case, you can NOT use it.

      Regards,
      JSA

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

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

  3. Hi there! I know this is kinda off topic but I’d figured
    I’d ask. Would you be interested in trading links or maybe guest writing a blog article or vice-versa?
    My site covers a lot of the same subjects as yours and I feel
    we could greatly benefit from each other. If you are interested feel free to shoot me
    an e-mail. I look forward to hearing from you! Wonderful blog by the way!

  4. Thanks for your publication on this blog. From my very own experience, there are times when softening upwards a photograph may possibly provide the photographer with a little an creative flare. Often times however, that soft cloud isn’t precisely what you had as the primary goal and can in many cases spoil a normally good image, especially if you anticipate enlarging them.

  5. We absolutely love your blog and find nearly all of your post’s to be just what I’m looking for. Would you offer guest writers to write content for you personally? I wouldn’t mind creating a post or elaborating on a lot of the subjects you write about here. Again, awesome web log!

  6. A person necessarily assist to make seriously posts I would state. This is the very first time I frequented your website page and thus far? I amazed with the research you made to create this particular put up extraordinary. Fantastic activity!

  7. Thanks for your write-up. What I want to comment on is that when searching for a good on the web electronics go shopping, look for a internet site with comprehensive information on important factors such as the privacy statement, protection details, payment procedures, and also other terms as well as policies. Always take time to look into the help and FAQ areas to get a better idea of how the shop operates, what they are able to do for you, and ways in which you can use the features.

  8. Hiya, I am really glad I’ve found this information. Nowadays bloggers publish just about gossips and web and this is really irritating. A good site with exciting content, that’s what I need. Thanks for keeping this web-site, I’ll be visiting it. Do you do newsletters? Can not find it.

  9. Hi, Neat post. There’s a problem with your website in internet explorer, would check this?IE still is the market leader and a huge portion of people will miss your wonderful writing due to this problem.

Leave a Reply

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