AngularJs在spring mvc中提交表单答案

【问题标题】：Submitting form by AngularJs in spring mvcAngularJs在spring mvc中提交表单
【发布时间】：2015-03-13 21:19:07
【问题描述】：

我是 Angularjs 的新手，并试图通过在 spring mvc 中使用 angularjs 来保存表格。我的表和控制器是：

@Entity
public class StudentSkills {

@Id
@GeneratedValue(strategy= GenerationType.AUTO)
private int skillId;
private String skillName;
private int expMonth;
private int expYear;
private String experties;

@ManyToOne
@JoinColumn(name= "student")
@JsonIgnore
private Student student;

// Getters Setters

我的 jsp 页面是：Angularjs 编码可能不正确

<script>
var skillApp = angular.module('skillApp', []);

skillApp.controller('skills', function($scope, $http) {

$scope.refreshSkill = function(){
    $http.get('/user/getuserskills')
    .success(function(data) {
        $scope.allSkills = data;
    });
};  

$scope.addSkill = function(skill){

    $http.put('/user/addskill/'+skill)

    .success($scope.refreshSkill());            
};
});
</script>

<title>Add Skill</title>
</head>
<body>
    <div ng-app="skillApp">
        <div ng-controller="skills" ng-init="refreshSkill()">
            <div ng-repeat="skill in allSkills">
                <div class="col-sm-6 col-lg-3">
                    <div class="thumbnail">
                        <div class="caption">
                            <h5>Name : {{skill.skillName}}</h5>
                            <h5>Name : {{skill.expMonth}}</h5>
                            <h5>Name : {{skill.expYear}}</h5>
                            <h5>Name : {{skill.experties}}</h5>
                        </div>
                    </div>
                </div>
            </div>  
                <form novalidate ng-submit="addSkill(skill)">
                    <input type="text" ng-model="skill.skillName">
                    <input type="text" ng-model="skill.expMonth">
                    <input type="text" ng-model="skill.expYear">
                    <input type="text" ng-model="skill.experties">
                    <input type="button" id="submit" value="Submit">                        
                </form>
        </div>
    </div>
</body>

我的控制器是：

@RequestMapping(value= "getuserskills", method = RequestMethod.GET)
public @ResponseBody List<StudentSkills> getStudentSkills(Model model){     
    List<StudentSkills> skills = studentService.getAllSkills(getStudentName());
    return skills;

}

@RequestMapping(value = "/addskill", method = RequestMethod.PUT)
@ResponseStatus(value = HttpStatus.NO_CONTENT)
public void update(@PathVariable("skill") StudentSkills skills) {       
    skills.setStudent(studentService.getStudent(getStudentName()));
    studentService.addStudentSkill(skills);
}

我想获取所有通过 refreshSkill() 函数保存的技能，并通过表单提交新技能。它不工作，我已经尝试但无法让它工作。如何链接表单，就像我们可以使用 @modelAttribute 链接一样。或者使用ajax提交表单的任何其他方式。谢谢你。

【问题讨论】：

标签： javascript jquery angularjs hibernate spring-mvc

【解决方案1】：

也许您应该遵循一些 Angular JS 教程或示例，例如 Angular phone tutorial，以及这个概念范围的 guide。

你的代码有几个问题：

1，您应该在控制器中定义json对象技能，以便您的视图可以识别它：$scope.skill={};.
2，如api of $http.put 所示，语法应为：put(url, data, [config]);。因此，您应该将代码修改为

 $http.put('/user/addskill/', $scope.skill).success($scope.refreshSkill());

3、在服务器端，你应该为StudentSkills参数使用注解@RequestBody，像这样：

public void update(@RequestBody StudentSkills skills) {       
    // your codes ...
}

因为注解@PathVariable是针对uri参数的，而当你使用http put的时候，参数是存放在请求体中的。

希望有帮助！

【讨论】：

还是不行，连get操作都没有响应。
@Kharoud 您是否为您的控制器配置了通用网址？在您的请求中获取所有技能$http.get('/user/getuserskills')，有一个前缀用户，但在您的控制器中，映射是getuserskills。
您好，先生，我早先认识到并更改了它。但它仍然没有响应。现在我从一开始就在做 angularjs，希望能找到我做错了什么。
get 方法开始工作。我不知道我在获取 url 中也提到了我的项目名称。
看来主要问题出在我的网址上。谢谢