【发布时间】：2026-01-12 08:15:01
【问题描述】：
如何将 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 项目 shell 中构建了新的 angularjs。因此，它使用相同的 spring .xml 配置文件，可能与解决方案有关。您可以阅读 spring 配置文件by clicking on this link。
【问题讨论】：
-
使用
$http发出 ajax 请求，详情请参阅文档 -
@charlietfl google 会生成一堆无法立即使用的不完整答案。或者谷歌生成功能齐全的示例应用程序超出了这个问题的范围。我只想要一个简单的工作解决方案来解决这个问题，这样我就可以从我理解的部分构建自己的应用程序，而不是依赖预构建的应用程序。您愿意详细说明这个具体问题吗？
-
如前所述，从文档开始docs.angularjs.org/api/ng/service/$http 周围有很多基本的 ajax 教程。您需要从模型对象创建数据对象并将其发送到服务器
$http -
我整天阅读，只有在遇到死胡同时才提问。我希望有人可以在被问到的水平上回答这个问题。谢谢。
-
但要求我们为您编码，这太宽泛了。这不是编码服务。
$http部分非常简单......您需要在服务器上使用脚本来接收数据，就像接收表单一样
标签： java angularjs spring rest spring-mvc