Javascript spring mvc中AngularJs提交表单_Javascript_Jquery_Angularjs_Hibernate_Spring Mvc

Javascript spring mvc中AngularJs提交表单

javascript jquery angularjs hibernate spring-mvc

Javascript spring mvc中AngularJs提交表单,javascript,jquery,angularjs,hibernate,spring-mvc,Javascript,Jquery,Angularjs,Hibernate,Spring Mvc,我是Angularjs新手，尝试在SpringMVC中使用Angularjs保存表。我的桌子和控制器是： @Entity public class StudentSkills { @Id @GeneratedValue(strategy= GenerationType.AUTO) private int skillId; private String skillName; private int expMonth; private int expYear; private String ex

我是Angularjs新手，尝试在SpringMVC中使用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

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

我的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>


var skillApp=angular.module（'skillApp'，[]）；
skillApp.controller（'skills'，function（$scope，$http）{
$scope.refreshSkill=函数（）{
$http.get（“/user/getuserskills”）
.成功（功能（数据）{
$scope.allSkills=数据；
});
};  
$scope.addSkill=功能（技能）{
$http.put（'/user/addskill/'+skill）
.success（$scope.refreshSkill（））；
};
});
增加技能
名称：{{skill.skillName}
名称：{{skill.expMonth}
名称：{{skill.expYear}
名称：{{skill.experties}

我的控制器是：

@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

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

@RequestMapping（value=“getuserskills”，method=RequestMethod.GET）
public@ResponseBody List getStudentSkills（模型）{
List skills=studentService.getAllSkills（getStudentName（））；
回归技能；
}
@RequestMapping（value=“/addskill”，method=RequestMethod.PUT）
@ResponseStatus（值=HttpStatus.无内容）
公共无效更新（@PathVariable（“skill”）StudentSkills skills）{
skills.setStudent（studentService.getStudent（getStudentName（））；
学生服务。添加学生技能（技能）；
}

我想获取使用refreshSkill（）函数保存的所有技能，并通过表单提交新技能。它不起作用，我已经试过了，但没能让它起作用。如何使用@modeldattribute链接表单。或者使用ajax提交表单的任何其他方式。多谢各位

也许您应该遵循一些Angular JS教程或示例，例如，和这个概念范围

您的代码中有几个问题：

1，您应该在控制器中定义json对象技能，以便视图能够识别它：

$scope.skill={}

2，如图所示，语法应该是：put（url，data，[config]）。因此，您应该修改您的代码以
 $http.put('/user/addskill/', $scope.skill).success($scope.refreshSkill());  

3.在服务器端，应使用注释@RequestBody作为StudentSkills参数，如下所示：
public void update(@RequestBody StudentSkills skills) {       
    // your codes ...
}

因为注释@PathVariable
用于uri参数，并且当您使用http put时，该参数存储在请求正文中
希望有帮助
 它仍然不工作，甚至get操作也没有响应。@哈罗德您为控制器配置了常规url了吗？在您的请求get all skills$http.get（'/user/getuserskills'）
中，有一个前缀user，但在您的控制器中，映射是getuserskills
。您好，先生，我之前识别了它并对其进行了更改。但它仍然没有反应。现在我从一开始就在做angularjs，希望找到我做错的地方。get方法开始工作。我不知道我在获取url时提到了我的项目名称。似乎主要问题是我的url。非常感谢。