如何使用$ http服务将Angular JS与spring mvc连接,以便从控制器获取数据到jsp

时间:2017-11-16 08:02:13

标签: spring spring-mvc angularjs-service

    My Controller:

如何从spring MVC获取值到Angular js以在jsp页面中显示。     下面我发布了我的spring MVC和Angular js配置代码。请给我一些帮助     如何从Spring controller.how获取值来获取我们的url路径     控制器。

    package com.dineshonjava.controller;

    import java.util.ArrayList;
    import java.util.HashMap;
    import java.util.List;
    import java.util.Map;






    import org.hibernate.SessionFactory;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.stereotype.Controller;
    import org.springframework.validation.BindingResult;
    import org.springframework.web.bind.annotation.ModelAttribute;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.RequestMethod;
    import org.springframework.web.servlet.ModelAndView;

    import com.dineshonjava.bean.EmployeeBean;
    import com.dineshonjava.model.Employee;
    import com.dineshonjava.service.EmployeeService;


    @Controller
    public class EmployeeController {

        @Autowired
        private EmployeeService employeeService;







        @RequestMapping(value = "/search", method = RequestMethod.GET)
        public Map<String, Object> search(@ModelAttribute("command")  EmployeeBean employeeBean,
                BindingResult result) {

            Map<String, Object> model = new HashMap<String, Object>();
            model.put("employees",  prepareListofBean(employeeService.listEmployeess()));


            return (model);
        }




        private List<EmployeeBean> prepareListofBean(List<Employee> employees){
            List<EmployeeBean> beans = null;
            if(employees != null && !employees.isEmpty()){
                beans = new ArrayList<EmployeeBean>();
                EmployeeBean bean = null;
                for(Employee employee : employees){
                    bean = new EmployeeBean();
                    bean.setName(employee.getEmpName());
                    bean.setId(employee.getEmpId());
                    bean.setAddress(employee.getEmpAddress());
                    bean.setSalary(employee.getSalary());
                    bean.setAge(employee.getEmpAge());
                    bean.setBloodgrp(employee.getBloodgrp());
                    bean.setAids(employee.getAids());
                    bean.setWeight(employee.getWeight());
                    bean.setPass(employee.getPass());
                    beans.add(bean);
                }
            }
            return beans;
        }


    }



    Angular js page:

这是我的角度js页面,我试图从Spring mvc控制器获取数据,但它失败了。请解释如何从spring MVC .im new获取数据到角度js和spring mvc这是我的任务更新。

<html>
<head>
<script>
    var app = angular.module('angularjsTable', ['angularUtils.directives.dirPagination']);
     app.controller('listitemdata',function($scope, $http){
         $scope.employees = []; 
         $http.get("http://localhost:8080/sdnext/search").success(function(response){ 
             $scope.employees = response; 
});
});
</script>
</head>
<tbody>
<tr dir-paginate="employee in employees">

<td>{{employee.id}}</td>
<td>{{employee.name}}</td>
<td>{{employee.age}}</td>
<td>{{employee.salary}}</td>
<td>{{employee.address}}</td>
<td>{{employee.bloodgrp}}</td>
<td>{{employee.aids}}</td>
<td>{{employee.weight}}</td>
</tr>
</tbody>

</html>

1 个答案:

答案 0 :(得分:1)

不要使用任何模型只发送数据作为回应并转换json中的DTO对象列表

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

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

在pom.xml中为jsonObject

 <dependency>
            <groupId>org.json</groupId>
            <artifactId>json</artifactId>
            <version>20160810</version>
        </dependency>