如何从spring控制器获取值到Angular js

时间:2017-11-23 07:33:28

标签: angularjs spring-mvc

如何在angular js页面中获取此值以在JSP页面中显示详细信息。请帮助获取此值并使用Ajax调用在Angular JS中查看它。

@Controller

public class EmployeeController {

    @Autowired
    private EmployeeService employeeService;
    @RequestMapping(value = "/iwill", method = RequestMethod.GET)
    public ModelAndView searchd() {


        return new ModelAndView("search");
    }


     @RequestMapping(value = "/search", method = RequestMethod.GET)
     public @ResponseBody void  search(HttpServletResponse res,HttpServletRequest req) throws IOException {

     List<Employee> data =  employeeService.listEmployeess();
       JSONArray array = new JSONArray();
           for (Employee e : data) {
               JSONObject jsonObject = new JSONObject(e);
               array.put(jsonObject);
           }
        res.getWriter().append(array.toString());

       }
    }

我的Angular js页面:

这里我不知道如何获取我的数据。如果我只是(http://localhost:8080/sdnext/search.html)使用这个url它显示json数据如果我在角度js中实现它不抛出错误但没有数据显示。

  <!doctype html>
<html >
    <head>
        <title>Spring MVC + AngularJS Demo</title>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
        <script>
        function Hello($scope, $http) {
            $http.get('http://localhost:8080/sdnext/search.html').
                success(function(response) {
                    $scope.employees = response.data;
                });
        }
        </script>
    </head>
    <body ng-app="app">

        <table>
        <tr>
        <th>Id</th>
        <th>Name</th>
        <th>Age</th>
        <th>salary</th>
        <th>Address</th>
        <th>BloodGrp</th>
        <th>Aids</th>
        <th>Weight</th>
        </tr>
        <tr>

<tbody  ng-controller="Hello">
 <tr ng-repeat="employee in employees"> 
 <td>{{employee.empId}}</td>
  <td>{{employee.empName}}</td>
   <td>{{employee.empAge}}</td> 
   <td>{{employee.salary}}</td> 
   <td>{{employee.empAddress}}</td>
    <td>{{employee.bloodgrp}}</td> 
    <td>{{employee.aids}}</td>
     <td>{{employee.weight}}</td> 
     </tr> </tbody> 
            </table>

    </body>
</html>

**

我的JSON回复如下: 我正在使用网址http://localhost:8080/sdnext/search.html,但我不知道如何在Angular js中使用它来在jsp页面中显示我的数据。

**

[{"empId":1,"bloodgrp":"0-ve","empName":"krishnaKumars","weight":78,"aids":"negative","empAge":23,"salary":15000,"empAddress":"madurai"},{"empId":2,"bloodgrp":"o-ve","empName":"Archanasundar","weight":68,"aids":"Negative","empAge":31,"salary":50000,"empAddress":"chennai"},{"empId":4,"bloodgrp":"o-ve","empName":"Kabali","weight":78,"aids":"negative","empAge":23,"salary":201300,"empAddress":"Madurai"}]

1 个答案:

答案 0 :(得分:1)

您需要在“/ search”

处从angular $ http.get发出ajax请求

这会起作用

@RequestMapping(value = "/search", method = RequestMethod.GET, produces = MediaType.APPLICATION_JSON_VALUE)

     public List<Employee> search( ) throws IOException {

     return  employeeService.listEmployeess();

       }
你在那里犯了一个错误

function Hello($scope, $http) {
            $http.get('http://localhost:8080/sdnext/search.html').
                success(function(response) {
                    $scope.employees = pesponse;
                });
        }

$ scope.employees = response.data是正确的

应该是这样的

<script>
angular.module("app",[])
        .controller("Hello",function ($scope,$http){
     $scope.getData = function() {
            $http.get('http://localhost:8080/sdnext/search.html').
                success(function(response) {
                    $scope.employees = response.data;
                });
        }
    });

        </script>

<tbody  ng-controller="Hello" ng-init="getData ()">

检查这些是否有效