javascript - 将表单从 Angular JS 发送到 Spring

Question

我有简单的应用程序 AngularJS 和 Spring boot。我想将用户预先填写的整个表单传递到我的应用程序并注册。通常我没有任何问题 - 传递具有正确结构和急板的 JSON obj。然而在这里我只是在循环中奔跑。 表单负载已发送到 Controller ，地址映射正确，但 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")
            }
        )
      }
});

这里是 Controller :

@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";
    }
}

最后但并非最不重要的一点是注册表格:

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----*/
}

Answer 1

您需要像这样发送请求

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

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

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