java - Submitting a Form with Angular JS and Spring MVC -
i noob angular js , having difficulties submit simple form using angular js , spring mvc. getting error:
the requested resource not available
mock.jsp
<%@taglib prefix='c' uri='http://java.sun.com/jsp/jstl/core'%> <%@taglib prefix="spring" uri="http://www.springframework.org/tags"%> <%@taglib prefix="form" uri="http://www.springframework.org/tags/form"%> <%@taglib prefix="security"uri="http://www.springframework.org/security/tags" %> <!doctype html> <html> <head> <title>settings</title> <link rel="stylesheet" href="css/main.css"> <link rel="stylesheet" href="css/workflow.css"> <link rel="stylesheet" href="css/upload.css"> <link rel="stylesheet" href="css/jquery.qtip.min.css"> <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"> <link rel="shortcut icon" href="images/logo-small.png" /> </head> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> <script type="text/javascript"> var app = angular.module('formsubmit', []); app.controller('formsubmitcontroller',[ '$scope', '$http', function($scope, $http) { $scope.list = []; $scope.headertext = 'angularjs post form spring mvc example: submit below form'; $scope.submit = function() { var formdata = { "name1" : $scope.name1, "name2" : $scope.name2, "name3" : $scope.name3, }; var response = $http.post('submitmock', formdata); response.success(function(data, status, headers, config) { $scope.list.push(data); }); response.error(function(data, status, headers, config) { alert( "exception details: " + json.stringify({data: data})); }); //empty list data after process $scope.list = []; }; }]); </script> <style> input.ng-invalid { border: 2px red solid; } </style> <body ng-app="formsubmit"> <div class="container"> <div class="col-sm-8 col-sm-offset-2"> <form data-ng-submit="submit()" data-ng-controller="formsubmitcontroller"> <!-- novalidate prevents html5 validation since validating ourselves --> <table border="1"> <tr> <td colspan="2"> <label>name line 1:</label> </td> </tr> <tr> <td colspan="2"> <div class="form-group"> <input type="text" name="name1" class="form-control" ng-model="name1" required ng-maxlength="40"> <p ng-show="userform.name1.$error.required" class="help-block">name required.</p> <p ng-show="userform.name1.$error.maxlength" class="help-block">maximum 40 characters</p> </div> </td> </tr> <tr> <td colspan="2"> <label>name line 2:</label> </td> </tr> <tr> <td colspan="2"> <div class="form-group"> <input type="text" name="name2" class="form-control" ng-model="name2" ng-maxlength="40"> <p ng-show="userform.name2.$error.maxlength" class="help-block">maximum 40 characters</p> </div> </td> </tr> <tr> <td colspan="2"> <label>name line 3:</label> </td> </tr> <tr> <td colspan="2"> <div class="form-group"> <input type="text" name="name3" class="form-control" ng-model="name3" ng-maxlength="40"> <p ng-show="userform.name3.$error.maxlength" class="help-block">maximum 40 characters</p> </div> </td> </tr> <tr> <td colspan="2"> <h4>you submitted below data through post:</h4> <pre>form data ={{list}}</pre> </td> </tr> <tr> <td colspan="2"> <!-- submit button --> <button type="submit" class="btn btn-primary" ng-disabled="userform.$invalid">submit</button> </td> </tr> </table> </form> </div> </div> </body> </html> mockcontroller.java
package com.opessoftware.controller; import org.springframework.stereotype.controller; import org.springframework.ui.modelmap; import org.springframework.web.bind.annotation.requestbody; import org.springframework.web.bind.annotation.requestmapping; import org.springframework.web.bind.annotation.requestmethod; import org.springframework.web.bind.annotation.requestparam; import org.springframework.web.bind.annotation.responsebody; import org.springframework.web.servlet.modelandview; import com.opessoftware.beans.mockform; import com.opessoftware.beans.settingsform; @controller public class mockcontroller { @requestmapping("/mock") public string getsettingspage(){ return "mock"; } @requestmapping(value = "/angularjs-http-service-ajax-post-code-example", method = requestmethod.get) public modelandview httpservicepostexample( modelmap model ) { return new modelandview("httpservice_post"); } @requestmapping(value = "/submitmock", method = requestmethod.post) public @responsebody mockform getmock(@requestbody mockform mockform){ return mockform; } } please help.
spring version = 3.2.0 release
you should have form structure below, there formdata in scope model contains name1, name2 & name3, missed add form name should name="myform"
markup
<form data-ng-submit="submit()" name="myform" data-ng-controller="formsubmitcontroller"> <!-- novalidate prevents html5 validation since validating ourselves --> <table border="1"> <tr> <td colspan="2"> <label>name line 1:</label> </td> </tr> <tr> <td colspan="2"> <div class="form-group"> <input type="text" name="name1" class="form-control" ng-model="formdata.name1" required ng-maxlength="40"> <p ng-show="userform.name1.$error.required" class="help-block">name required.</p> <p ng-show="userform.name1.$error.maxlength" class="help-block">maximum 40 characters</p> </div> </td> </tr> <tr> <td colspan="2"> <label>name line 2:</label> </td> </tr> <tr> <td colspan="2"> <div class="form-group"> <input type="text" name="name2" class="form-control" ng-model="formdata.name2" ng-maxlength="40"> <p ng-show="userform.name2.$error.maxlength" class="help-block">maximum 40 characters</p> </div> </td> </tr> <tr> <td colspan="2"> <label>name line 3:</label> </td> </tr> <tr> <td colspan="2"> <div class="form-group"> <input type="text" name="name3" class="form-control" ng-model="formdata.name3" ng-maxlength="40"> <p ng-show="userform.name3.$error.maxlength" class="help-block">maximum 40 characters</p> </div> </td> </tr> <tr> <td colspan="2"> <h4>you submitted below data through post:</h4> <pre>form data ={{list}}</pre> </td> </tr> <tr> <td colspan="2"> <!-- submit button --> <button type="submit" class="btn btn-primary" ng-disabled="userform.$invalid">submit</button> </td> </tr> </table> </form> after making changes in markup need sort controller code, server side method asking mockform parameter, should pass formdata value in it.
code
$scope.formdata = {}; //should set object on init. $scope.submit = function() { var response = $http.post('submitmock',{ mockform: formdata}); //passing mockform response.success(function(data, status, headers, config) { $scope.list.push(data); }); response.error(function(data, status, headers, config) { alert("exception details: " + json.stringify({ data: $scope.formdata //used formdata model here })); }); //empty list data after process $scope.list = []; };
Comments
Post a Comment