使用AngularJS和Spring MVC形成空值_Angularjs_Spring Mvc

使用AngularJS和Spring MVC形成空值

angularjs spring-mvc

使用AngularJS和Spring MVC形成空值,angularjs,spring-mvc,Angularjs,Spring Mvc,我正在构建一个使用springmvc和AngularJS的简单应用程序。问题是表单的值是空的代码在上面 MockController.java MockForm.java mock.jsp 设置 var app=angular.module（'formSubmit'，[]）； app.controller（'FormSubmitController'，['$scope'，'$http'，函数（$scope，$http）{ $scope.formData={}； $scope.headerTe

我正在构建一个使用

springmvc

和

AngularJS

的简单应用程序。问题是表单的值是空的

代码在上面

MockController.java

MockForm.java

mock.jsp


设置
var app=angular.module（'formSubmit'，[]）；
app.controller（'FormSubmitController'，['$scope'，'$http'，函数（$scope，$http）{
$scope.formData={}；
$scope.headerText='AngularJS Post Form Spring MVC示例：在表单下方提交'；
$scope.submit=函数（）{
var formData={
“名称1”：$scope.name1，
“名称2”：$scope.name2，
“name3”：$scope.name3，
};
var response=$http.post（'http://localhost:8080/fire-FATCAweb/SubmitMock.html'，formData）；//传递mockForm
response.success（函数（数据、状态、标题、配置）{
警报（'Success！'+JSON.stringify({
数据：$scope.formData//此处使用了formData模型
}) );
$scope.formData.push（数据）；
});
错误（函数（数据、状态、标题、配置）{
警报（“异常详细信息：+JSON.stringify({
数据：$scope.formData//此处使用了formData模型
}));
})
};
}]);
input.ng-无效{
边框：2个红色实心；
}
名称行1：
名称是必需的
最多40个字符
名称行2：
最多40个字符
名称行3：
最多40个字符
您通过post提交了以下数据：
表单数据={{formData}}
提交

问题是，我在

mock.jsp

mockForm.getName1（）、mockForm.getName2（）和mockForm.getName3（）

中点击了

Submit

有什么想法吗

谢谢

您的帖子应该发送

mockForm

参数，填充

formData

，因为您的服务器方法要求

mockForm

，它有各种类对象，您已经将它们包装在

formData

中，URL应该是

“/Mock/SubmitMock”

http://localhost:8080/fire-fatca网站/SubmitMock.html

代码

当我添加这段代码使我无法再调用控制器时，可能是因为语法错误？请看一看

var response=$http.post（'http://localhost:8080/fire-fatca网站/SubmitMock.html'，{mockForm:formData}）

@JoséMendes那是我的错你的URL应该是

/Mock/SubmitMock

而不是html路径..应该点击控制器的操作

@Controller
public class MockController {

    private Logger log = LoggerFactory.getLogger(MockController.class);

     @RequestMapping("/mock")
        public String getSettingsPage(){
            return "mock";
        }   

      @RequestMapping(value = "/SubmitMock", method = RequestMethod.POST)
        public @ResponseBody String getMock(@RequestBody MockForm mockForm){ 

          StringBuilder reponseData = new StringBuilder();
            reponseData.append("Name1: "+ mockForm.getName1()+" ");
            reponseData.append("Name2: "+ mockForm.getName2()+" ");
            reponseData.append("Name3: "+ mockForm.getName3());

            log.debug(reponseData.toString());

            return reponseData.toString();

        }
    }

public class MockForm {

private String name1;
private String name2;
private String name3;

public String getName1() {
    return name1;
}
public void setName1(String name1) {
    this.name1 = name1;
}
public String getName2() {
    return name2;
}
public void setName2(String name2) {
    this.name2 = name2;
}
public String getName3() {
    return name3;
}
public void setName3(String name3) {
    this.name3 = name3;
}

}

<%@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"%>
<!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="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.formData = {};
            $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('http://localhost:8080/fire-fatca-web/SubmitMock.html', formData); //passing mockForm
                response.success(function(data, status, headers, config) {      
                    alert('Success!' + JSON.stringify({
                        data: $scope.formData //used formData model here
                    }) );
                    $scope.formData.push(data);
                });
                response.error(function(data, status, headers, config) {
                    alert("Exception details: " + JSON.stringify({
                        data: $scope.formData //used formData model here
                    }));
                })

            };
        }]);
</script>
<style>        
input.ng-invalid {    
    border: 2px red solid;
    }
</style>
<body data-ng-app="formSubmit">

    <div class="container">
    <div class="col-sm-8 col-sm-offset-2">


    <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" data-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" data-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" data-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 ={{formData}}</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>

$http.post('/Mock/SubmitMock', { 
    mockForm: formData
})