Html5 DateTime + Ajax Jquery + SpringBoot @JsonFormat example

In the tutorial, JavaSampleApproach will show you how to build an web application with Html5 DateTime + Jquery Ajax + SpringBoot @JsonFormat.

Related posts:
Ajax Jquery post List JavaScript Objects to SpringBoot server | BootStrap

I. Technologies

– Java 1.8
– Maven 3.6.1
– Spring Tool Suite – Version 3.8.1.RELEASE
– Html 5
– JQuery Ajax
– Bootstrap
– Spring Boot – 1.5.7.RELEASE

II. Html5 DateTime + Ajax Jquery + SpringBoot

For working with time input, Html5 support a set of new Input Types:

  • date
  • datetime-local
  • time
  • week

– To bind data from Html5 date input with JQuery, we use new Date():

– To display Date object with customized format, we can use some Date methods as below code

– When exchange data between client to server, Json format is used by JSON.stringify(), and Date objects will be converted to String type with UTC standard format.

Html5 DateTime - JqueryAjax - SpringBoot RestAPIs - post tasks

– When receiving Json data from Server, we need change objects to Date for working:

Html5 DateTime - JqueryAjax - SpringBoot RestAPIs - get tasks logs

– With SpringBoot code, we use @JsonFormat annotation of Jackson to convert Date format:

GOAL:

– Create SpringBoot project as below:

Html5 DateTime - JqueryAjax - SpringBoot RestAPIs - project structure

Run and check results:

-> adding form:

Html5 DateTime - JqueryAjax - SpringBoot RestAPIs - adding task form

Html5 DateTime - JqueryAjax - SpringBoot RestAPIs - add tasks

-> post data:

Html5 DateTime - JqueryAjax - SpringBoot RestAPIs - post task view

-> get data:

Html5 DateTime - JqueryAjax - SpringBoot RestAPIs - get all view

III. Practice

Step to do:
– Create Spring Boot project
– Create data model
– Create Web Controller to provide web view
– Create RestController for GET/POST request
– Create an index.html view
– Implement Jquery Ajax GET/POST data

1. Create Spring Boot project

Use SpringToolSuite to create a SpringBoot project SpringBootHtmlDateTimeJQueryAjax with dependencies:

2. Create data model

– Create LogTime model with JsonFormat:

3. Create Web Controller to provide web view

4. Create RestController for GET/POST request

5. Create an index.html view

6. Implement Jquery Ajax GET/POST data

IV. Sourcecode

SpringBootHtml5DateTimeJQueryAjax

By JavaSampleApproach | November 15, 2017.


Related Posts


Got Something To Say:

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

*