有 Java 编程相关的问题?

你可以在下面搜索框中键入要查询的问题!

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) 个答案

  1. # 1 楼答案

    您可以通过以下方式解决此问题:

    1. 在应用程序中包括ngResource

      var validationApp = angular.module('validationApp', ['ngResource']);
      
    2. 在控制器上注入$resource

      validationApp.controller('mainController', ['$scope', '$resource', function($scope, $resource) { ... }]);
      
    3. 然后,您可以使用$resource创建一个负责在submitForm内发送请求的对象:

      var NameCheck = $resource('http://url-to-service', {});
      var result = NameCheck.get();
      console.log(result.answer);
      
    4. 记住要包括角度资源。js文件

    您还可以使用$http和几行代码执行类似的操作