AngularJS Form Post Spring MVC JSON

AngularJS Form Post Spring MVC JSON

In this demo you will see how to submit form data from AngularJS page to Spring MVC application. We will create simple html page using AngularJS with three fields and one submit button. On button click we will submit all form data through post to Spring MVC controller where controller will return same data in response.

  • Maven project AngularJSPostFormSpringMVC structure:

AngularJS Form Post Spring MVC JSON

  • pom.xml:

  • dispatcher-servlet.xml

  • web.xml:

  • Person.java:

  • SpringMVCController.java:

  • AngularJSFormSubmit.jsp:

  •  Web page output:

AngularJS Form Post Spring MVC JSON

AngularJS Form Post Spring MVC JSON

  •  For more details please visit AngularJS API here

download  Download Project:  AngularJS Form Post Spring MVC JSON

11 thoughts on “AngularJS Form Post Spring MVC JSON

  1. Description Resource Path Location Type
    cvc-complex-type.2.4.c: The matching wildcard is strict, but no declaration can be found for element ‘context:component-scan’. dispatcher-servlet.xml /AngularJSPostFormSpringMVC/src/main/webapp/WEB-INF line 14 XML Problem

    Pass JSON Map Spring MVC Controller AngularJS
    AngularJS Form Post Spring MVC JSON
    Pass JSON Array AngularJS Spring MVC Controller

    Hello Sir, When I open inside Eclipse kepler this error coming, how do I solve it. which version eclipse you are using, please tell me sir,
    I did not changed anything, when I import into the eclipse kepler workspace the sampe error coming for the last 3 tutorial
    please help sir

  2. With the exact instructions that you give, I get:
    Sep 13, 2015 1:25:57 PM org.springframework.web.servlet.PageNotFound noHandlerFound
    WARNING: No mapping found for HTTP request with URI [/OrderSystem/PostFormData] in DispatcherServlet with name ‘dispatcher’

    and a 404 error code from the:
    response.error(function(data, status, headers, config) {
    alert( “status:”+ status+”\nException details: ” + JSON.stringify({data: data}));
    });

    in AngularJSFormSubmit.jsp

  3. Hi,

    I am not seeing any data, just {{list}} after posting:(shown below)

    You submitted below data through post:

    Form data ={{list}}

    Can you please help??

  4. Hi,
    I am facing a problem of Error:POST: 404,The same code placed in my project.All the configuration is correctly installed.

  5. Hi,
    I am getting following Error:POST: 404,The same code placed in my project.All the configuration is correctly installed.

Leave a Reply

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