java如何从angular调用spring mvc REST控制器。js?
如何将angularjs web表单与spring mvc REST控制器连接起来,以便在提交表单时只刷新页面的一小部分(而不是整个页面)强>
在这种情况下,只刷新页面中的字符串,而不是刷新整个页面。具体来说,我如何修改下面的代码,以便在表单提交之后,页面上唯一从服务器刷新的元素是<H1>${person.answer}</H1>
强>
注意:下面的代码经过编辑,符合@Cotta的建议。我用@Cotta的建议取代了原来的代码,而不是附加代码,因为我希望它易于阅读强>
index.html
是:
<!DOCTYPE html>
<html>
<head>
<!-- CSS ===================== -->
<!-- load bootstrap -->
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<style>
body { padding-top:30px; }
</style>
<!-- JS ===================== -->
<!-- load angular -->
<script src="http://code.angularjs.org/1.2.6/angular.js"></script>
<script src="app.js"></script>
</head>
<!-- apply angular app and controller to our body -->
<body ng-app="validationApp" ng-controller="mainController">
<div class="container">
<div class="col-sm-8 col-sm-offset-2">
<!-- PAGE HEADER -->
<div class="page-header"><h1>What is your name?</h1></div>
<!-- FORM -->
<!-- pass in the variable if our form is valid or invalid -->
<form name="userForm" ng-submit="submitForm(userForm.$valid)" novalidate> <!-- novalidate prevents HTML5 validation since we will be validating ourselves -->
<!-- NAME -->
<div class="form-group">
<label>Name</label>
<input type="text" name="name" class="form-control" ng-model="name" required>
</div>
<!-- SUBMIT BUTTON -->
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div><!-- col-sm-8 -->
</div><!-- /container -->
</body>
</html>
<!-- example from: https://scotch.io/tutorials/angularjs-form-validation -->
app.js
是:
var validationApp = angular.module('validationApp', ['ngResource']);
validationApp.controller('mainController', ['$scope'], '$resource', function($scope, $resource) {
// function to submit the form after all validation has occurred
$scope.submitForm = function(isValid) {
// check if form is valid before sending data to the server
if (isValid) {
var NameCheck = $resource('/api/namecheck', {});
var result = NameCheck.get();
console.log(result.answer);
}
};
});
RingRestController.java
是:
@RestController
@RequestMapping("/api")
public class RingRestController {
@RequestMapping(value = "/namecheck", method = RequestMethod.POST)
public @ResponseBody Person create(@RequestBody Person person) {
String answer = "";
if (person.getName().equals("Frodo") || person.getName().equals("frodo")){
answer = "Frodo, would you please hold onto this ring for me?";
}
else {
answer = "Thank you for telling us your name.";
}
person.setTransientAnswer(answer);
return person;
}
}
注意:这使用了与spring petclinic示例应用程序的angularjs分支相同的核心项目(我删除了/src/main/webapp
中的所有内容,并在spring项目外壳中构建了新的angularjs。因此,它使用了相同的spring.xml配置文件,可能与解决方案相关。您可以读取spring配置文件by clicking on this link。
# 1 楼答案
您可以通过以下方式解决此问题:
在应用程序中包括
ngResource
在控制器上注入
$resource
然后,您可以使用
$resource
创建一个负责在submitForm
内发送请求的对象:记住要包括角度资源。js文件
您还可以使用
$http
和几行代码执行类似的操作