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, JavaSampleApproach 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:

2. Create simple model

Create a Customer model:

3. Create simple Response message

Create a simple message: Response

4. Create Web Controller to provide web views

5. Create RestController for POST & GET requests

6. Create index.html view

Simple index.html is created with Bootstrap & Thymeleaf

7. Create Ajax POST & GET JavaScript

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

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

8. Run & Check results

Build & Run project with Spring Boot mode.
Results:

jquery ajax post get spring boot results

IV. Sourcecode

SpringBootJQueryAjaxClient

By JavaSampleApproach | January 17, 2017.

Last updated on October 19, 2017.


Related Posts


6 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

Got Something To Say:

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

*