Web Form Submission is regular task when developing a Web page. In the tutorial, JavaSampleApproach will introduce you how to use Spring Form Submission when building a Spring MVC Web page.
Related Posts:
1. How to integrate Http Angularjs & Spring Boot
2. How to integrate JQuery Ajax POST/GET & Spring Boot
Contents
I. Technology for Spring Form Submission tutorial
– Java 1.8
– Maven: 3.3.9
– Editor: Spring Tool Suite – Version 3.7.3.RELEASE
– Spring Boot: Version: 3.8.0.RELEASE
II. Overview
1. Project Structure
2. Step to do
– Create Spring Boot project
– Create a Customer model
– Create a simple Web Controller.
– Create a html views.
– Run & Check result
III. Practices
1. Create a Spring Boot project
Open Spring Tool Suite, choose File -> New -> Spring Starter Project, input project’s info. Press Next button, then add needed dependencies:
– For Thymeleaf, choose Template Engines, select Thymeleaf
– For Spring Web MVC, choose Web, then select Web.
Press Finish, Spring Boot project will be created successfully.
Check pom.xml file for 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 Customer model
package com.javasampleapproach.formsubmission.model; public class Customer { private long id; private String firstname; private String lastname; public long getId() { return id; } public void setId(long id) { this.id = id; } public String getFirstname() { return firstname; } public void setFirstname(String firstname) { this.firstname = firstname; } public String getLastname() { return lastname; } public void setLastname(String lastname) { this.lastname = lastname; } } |
3. Create a Simple Web Controller.
Create SimpleWebController with 2 RequestMappings:
– @RequestMapping(value=”/form”, method=RequestMethod.GET): return a html view: form
– @RequestMapping(value=”/form”, method=RequestMethod.POST): to submit customer form, then a html view: “result “
package com.javasampleapproach.formsubmission.controller; import org.slf4j.Logger; import org.slf4j.LoggerFactory; import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.ModelAttribute; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestMethod; import com.javasampleapproach.formsubmission.model.Customer; @Controller public class SimpleWebController { Logger log = LoggerFactory.getLogger(this.getClass()); @RequestMapping(value="/form", method=RequestMethod.GET) public String customerForm(Model model) { model.addAttribute("customer", new Customer()); return "form"; } @RequestMapping(value="/form", method=RequestMethod.POST) public String customerSubmit(@ModelAttribute Customer customer, Model model) { model.addAttribute("customer", customer); String info = String.format("Customer Submission: id = %d, firstname = %s, lastname = %s", customer.getId(), customer.getFirstname(), customer.getLastname()); log.info(info); return "result"; } } |
4. Create html views.
– Create 2 html views: “result” & “form”
Place them at: /src/main/resources/template
– form.html:
<!DOCTYPE HTML> <html xmlns:th="http://www.thymeleaf.org"> <head> <title>Form Submission</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> </head> <body> <h1>Customer Form</h1> <form action="#" th:action="@{/form}" th:object="${customer}" method="post"> <p>Id: <input type="text" th:field="*{id}" /></p> <p>First Name: <input type="text" th:field="*{firstname}" /></p> <p>Last Name: <input type="text" th:field="*{lastname}" /></p> <p><input type="submit" value="Submit" /> <input type="reset" value="Reset" /></p> </form> </body> </html> |
– result.html:
<!DOCTYPE HTML> <html xmlns:th="http://www.thymeleaf.org"> <head> <title>Form Submission</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> </head> <body> <h1>Result</h1> <p th:text="'id: ' + ${customer.id}" /> <p th:text="'First Name: ' + ${customer.firstname}" /> <p th:text="'Last Name: ' + ${customer.lastname}" /> <a href="/form">Submit another Customer Form</a> </body> </html> |
5. Run & Check result
– Maven build:
clean install
– Run project as Mode: Spring Boot App.
– Make a request:
http://localhost:8080/form
Then input: id, firstname, lastname.
Press Submit button then result:
IV. Source code
Last updated on June 4, 2017.
I imported this code to my sts and I am getting javax.servlet.ServletException: Circular view path [form]: would dispatch back to the current handler URL [/form] again. Check your ViewResolver setup! (Hint: This may be the result of an unspecified view, due to default view name generation.) error
Hello Mazaharul Haque,
We had checked sourcecode and everything works well!(Also works well with 1.5.7.RELEASE SpringBoot version)
-> Logs:
How about your problems now?
Regards,
JSA
you need to remove your apache tomcat server library to resolve this.
you need to remove your apache tomcat server library from your build path to resolve this.
Hello! You can use our professional web design services to improve your online business and website conversions. 8+ years of successful work, reasonable pricing. Please, confirm the request to find out more.
Thanks! And thanks for sharing your great posts every week!