javascript - 如何在 Angular/Spring Boot 应用程序中的服务器端接收表单数据？

Question

我有一个基于 Spring Boot 和 Angular 的应用程序。在那里，我有这个表格:

<form name="create-project">
    <div class="input-group">
        <input type="text" class="form-control" ng-model="project.name"
               placeholder="Project name">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button"
                ng-click="createProject(project)">Create project</button>
      </span>
    </div>
</form>

createProject 在 Controller 中定义。

[...]
.controller('projects', function($scope, $http) {
    $http.get('/resource/').success(function(data) {
        $scope.greeting = data;
    });
    $scope.createProject = function(project) {
        console.log("createProject called on the client side, project name: " +
            project.name);
        $http.post('/createProject', {name: project.name}).success(function(){
            console.log("createProject called successfully");
        });
    }
});

在服务器端，我有以下方法来处理 createProject 请求:

@SpringBootApplication
@RestController
public class MyApplication {
    [...]
    @RequestMapping(value="/createProject", method=RequestMethod.POST)
    public String createProject(final String name) {
        System.out.println("createProject, server side, name: " + name);
        return "";
    }   
}

当我运行应用程序时，在项目名称字段中输入一些文本并按下创建项目 按钮，会发生以下情况:

1. 我在客户端看到日志消息(在客户端调用了 createProject，项目名称:)，项目名称正确。
2. 在服务器日志中，我看到 createProject，服务器端，名称:null。

输入的项目名称没有传递到服务器，或者它不接受它。

我该如何修复它，我。 e.确保我可以在方法 MyApplication.createProject?

中访问输入的项目名称

Answer 1

我觉得你的 JavaScript 代码没问题。我认为您需要将 @RequestBody 添加到您的 createProject()。目前它正在检查 url 的名称值。例如/createProject?name=John。相反，您正在做的是在请求正文中指定它。这就是名称为空的原因。

@SpringBootApplication
@RestController
public class MyApplication {
    [...]
    @RequestMapping(value="/createProject", method=RequestMethod.POST)
    public String createProject(@RequestBody final String name) {
        System.out.println("createProject, server side, name: " + name);
        return "";
    }   
}