java 使用 Angular JS 和 Spring MVC 提交表单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30919914/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-11-02 17:50:10 来源:igfitidea点击:
Submitting a Form with Angular JS and Spring MVC
提问by José Mendes
I am noob with Angular JS and I am having difficulties to submit a simple Form using Angular JS and Spring MVC. I am getting this error:
我是 Angular JS 的菜鸟，我很难使用 Angular JS 和 Spring MVC 提交一个简单的表单。我收到此错误：
The requested resource is not available
mock.jsp
请求的资源不可用
模拟.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 we will be 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 is 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
模拟控制器.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
Spring 版本 = 3.2.0 发布
回答by Pankaj Parkar
You should have your form structure like below, there would be formDatain scope model which will contains name1, name2& name3, You also missed to add form name which should be name="myForm"
您应该拥有如下所示的表单结构formData，范围模型中将包含name1, name2& name3，您还没有添加表单名称，它应该是name="myForm"
Markup
标记
<form data-ng-submit="submit()" name="myForm" data-ng-controller="FormSubmitController">
<!-- novalidate prevents HTML5 validation since we will be 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 is 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 this changes in Markup you need to sort your controller with some code, As you server side method is asking for mockFormparameter, you should pass formDatavalue in it.
在标记中进行此更改后，您需要使用一些代码对控制器进行排序，当您的服务器端方法要求mockForm参数时，您应该formData在其中传递值。
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 = [];
};
