将表单从 Angular JS 发送到 Spring答案

【问题标题】：Sending form from Angular JS to Spring将表单从 Angular JS 发送到 Spring
【发布时间】：2017-03-04 22:15:05
【问题描述】：

我有简单的应用程序 AngularJS 和 Spring boot。我想将用户预先填写的整个表格传递给我的应用程序并注册。通常我没有问题 - 以正确的结构和 presto 传递 JSON obj。但是在这里我只是在criicle中运行。表单payload发送到控制器，地址映射正确，但是java表单内容为空

负载发送到服务器：

{"userform":{"name":"a","surname":"a","email":"a@a.com","password":"a","confirmPassword":"a"}}

这是我的html：

<div class="alert alert-danger" ng-show="error">
    There was a problem registering. Please try again.
</div>
<form role="form" name="userForm" ng-submit="register()">
<div class="form-group">
    <label for="name">Name:</label>
    <input type="text" class="form-control" id="name" name="name" ng-model="formData.name"/>
</div>
<div class="form-group">
    <label for="name">Surname:</label>
    <input type="text" class="form-control" id="surname" name="surname" ng-model="formData.surname"/>
</div>
<div class="form-group">
    <label for="name">Email:</label>
    <input type="text" class="form-control" id="email" name="email" ng-model="formData.email"/>
</div>
<div class="form-group">
    <label for="password">Password:</label>
    <input type="password" class="form-control" id="password" name="password" ng-model="formData.password"/>
</div>
<div class="form-group">
    <label for="confirmpassword">Password:</label>
    <input type="password" class="form-control" id="confirmpassword" name="confirmpassword"
           ng-model="formData.confirmpassword"/>
</div>
<button type="submit" class="btn btn-primary">Submit</button>

这里是java脚本

app.controller('register', function ($scope, $rootScope, $http) {
    $scope.formData = {};
    $scope.register = function () {
        $http.post('/api/register', {userform: $scope.formData}).then(
            function (resposne) {
                console.log("registered");
                console.log(response);
            },
            function (response) {
                console.log("Register error")
            }
        )
      }
});

这里是控制器：

@RestController
@RequestMapping("/api")
public class ApiController {

    @RequestMapping(value = "/register", method = RequestMethod.POST)
    public String register(@RequestBody RegisterForm userform) {
        System.out.println("name:" + userform.getName());
        System.out.println("surname:" + userform.getSurname());
        return "OK";
    }
}

最后但并非最不重要的RegisterForm：

public class RegisterForm {
    private static final String NOT_BLANK_MESSAGE = "Cannot be blank";
    @NotBlank
    @Email(message = "Not email")
    private String email;

    @NotBlank(message = RegisterForm.NOT_BLANK_MESSAGE)
    private String name;

    @NotBlank(message = RegisterForm.NOT_BLANK_MESSAGE)
    private String surname;

    @NotBlank(message = RegisterForm.NOT_BLANK_MESSAGE)
    private String password;

    @NotBlank(message = RegisterForm.NOT_BLANK_MESSAGE)
    private String confirmpassword;

    /*-----GETTERS AND SETTERS HERE----*/
}

【问题讨论】：

标签： javascript java angularjs spring spring-mvc

【解决方案1】：

你需要这样发送请求

$http.post('/api/register', $scope.formData)

然后 Spring 将能够将您的请求映射到 RegisterForm pojo。

在您的代码中，Spring 尝试将您的请求映射到具有 RegisterForm 类型的一个字段 userform 的类。

【讨论】：