AngularJS取得后台Jason数据显示在页面上

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了AngularJS取得后台Jason数据显示在页面上相关的知识，希望对你有一定的参考价值。

代码下载：https://files.cnblogs.com/files/xiandedanteng/angularjsAjax.rar

 

前台代码：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html ng-app="notesApp">
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP ‘index.jsp‘ starting page</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">

    <!--
    <link rel="stylesheet" type="text/css" href="styles.css">
    -->
    <script src="angular1.4.6.min.js"></script>
  </head>
  
  <body>
    <table ng-controller="MainCtrl as ctrl" border="1px">
        <tr ng-repeat="member in ctrl.items">
            <td><span ng-bind=‘member.id‘/></td>    
            <td><span ng-bind=‘member.name‘/></td>           
            <td><span ng-bind=‘member.age‘/></td>
        </tr>
    </table>
  </body>
</html>

<script type="text/javascript">
<!--
    angular.module(‘notesApp‘,[])
     .controller(‘MainCtrl‘,[‘$http‘,function($http){
         
           var self=this;
           self.items=[];

        var url="/angularjsAjax/Members";
           $http.get(url).then(function(response){
               self.items=response.data; 
           },function(errResponse){
               alert(‘error‘+errResponse);           
           });       
     }]);
//-->
</script>

 

后台代码：

package com.test;


import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import net.sf.json.JSONArray;


public class MembersServlet extends HttpServlet {
    private static final long serialVersionUID = 56890894234786L;
    
    public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, java.io.IOException {
        request.setCharacterEncoding("UTF-8");
        PrintWriter out = response.getWriter();

        
        List<Member> ls=new ArrayList<Member>();
        ls.add(new Member("001","Andy",20));
        ls.add(new Member("201","Bill",40));
        ls.add(new Member("501","Cindy",60));
        ls.add(new Member("901","Eintein",88));
        
        JSONArray jArray=JSONArray.fromObject(ls);        
        String json=jArray.toString();
        
        System.out.println("json="+json);
        out.print(json);
        out.flush();
    
        return;
    }
        
    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, java.io.IOException {
        doPost(request, response);
    }
}

Member类代码：

package com.test;

public class Member{
    public Member(String id,String name,int age){
        this.id=id;
        this.name=name;
        this.age=age;                    
    }
    
    private String id;
    private String name;
    public String getId() {
        return id;
    }
    public void setId(String id) {
        this.id = id;
    }
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
    public int getAge() {
        return age;
    }
    public void setAge(int age) {
        this.age = age;
    }
    private int age;
}

效果：

技术分享

 

以上是关于AngularJS取得后台Jason数据显示在页面上的主要内容，如果未能解决你的问题，请参考以下文章

通过AngularJS实现前端与后台的数据对接

angularjs在进入界面前加载数据

AngularJS：如何在页面完全加载之前显示预加载或加载？

初探AngularJs框架

WebUI实践之使用AngularJS 进行独立开发(模拟后台)

关于angularjs异步操作后台请求时，用$q.all排列先后顺序的问题