代码下载：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数据显示在页面上的更多相关文章

  1. PHP----作业：查询数据显示在页面上

    作业: 查询INFO表所有数据,显示在页面上(表格)性别要显示男女 民族 显示民族名称 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tra ...

  2. ASP.NET WebForm中JavaScript修改了页面上Label的值，如何在后台代码中获取

    在用ASP.NET WebForm开发一个项目时,遇到如下的一个情况 页面上有一个Textbox控件,还有2个Label 控件. 当Textbox控件中的值更改时,两个Label控件上的值做相应的更改 ...

  3. 数据量大的数据转换成jason并显示在页面上

    代码列子: public ActionResult FindUserByUserId(SysMessageDTO model) { CustomResultMsg customResult = new ...

  4. 使用 AngularJS 开发一个大规模的单页应用（SPA）

      本文的目标是基于单页面应用程序开发出拥有数百页的内容,包括认证,授权,会话状态等功能,可以支持上千个用户的企业级应用. 下载源代码 介绍 (SPA)这样一个名字里面蕴含着什么呢? 如果你是经典的S ...

  5. 【WPF学习笔记】之如何把数据库里的值读取出来然后显示在页面上：动画系列之（六）（评论处有学习资料及源码）

    (应博友们的需要,在文章评论处有源码链接地址,以及WPF学习资料.工具等,希望对大家有所帮助) ...... 承接系列五 上一节讲了,已经把数据保存到数据库并且删除数据,本讲是把已经存在的数据从数据库 ...

  6. 简洁AngularJS框架后台管理系统bootstrap后台模板

    最近在做一个后台管理的项目,但是没有设计图完全,所以就发现一款非常不错的模版. 这个模版是基于 AngularJS 和 bootstrap 的后台管理系统模版. Minovate是 AngularJS ...

  7. spring从服务器磁盘读取图片，然后显示于前端页面上

    需求是,前台通过传参,确定唯一图片,然后后台在服务器磁盘中读取该图片,然后显示于前台页面上. 后台代码: @RequestMapping("unit/bill/showeinvoice&qu ...

  8. 把Employees显示在页面上

    项目代码下载:https://files.cnblogs.com/files/xiandedanteng/gatling20200429-1.zip 需求:从后台DB取出雇员数据,显示在前台页面上: ...

  9. yaf将错误输出打印在页面上

    修改项目的配置文件 文件是conf/application.ini 添加两行代码 application.dispatcher.throwException = 1 ;开启/关闭自动异常捕获功能 ap ...

随机推荐

  1. Win10开启IIS

    1.win+r control 2.程序

  2. MyEclipse生成get/set注释

    我的外网链接 http://yezi-0016.iteye.com/blog/2290421

  3. HDU 3792 素数打表

    Description If we define dn as: dn = pn+1-pn, where pi is the i-th prime. It is easy to see that d1 ...

  4. Python之时间：datetime模块

    datetime在time基础之上封装了一些方法.但是time是经常使用的,datetime中的功能,time都能实现 一.datetime的三个模块 datetime.date datetime.t ...

  5. cxGrid让指定的某行自动呈选选中的状态

    cxView.ViewData.Rows[cxView.DataController.DataSource.DataSet.RecNo-1].Selected := True;//将当前的行呈选中的状 ...

  6. 《挑战程序设计竞赛》P196 铺砖问题

    题意:给定n*m格子,每个格子被染成了黑色或者白色,现在要用1*2的砖块覆盖这些格子,块与块不得重叠,且覆盖所有的白色格子,但不覆盖任意一个黑色格子,求一共有多少种覆盖方法. 思路:书上给的思路太巧妙 ...

  7. div模拟dropdownlist控件 div下拉菜单

    原文发布时间为:2009-10-16 -- 来源于本人的百度文章 [由搬家工具导入] 控件发布：div2dropdownlist(div模拟dropdownlist控件) div3dropdownli ...

  8. HTML title属性换行显示的方法

    原文发布时间为:2009-04-22 -- 来源于本人的百度文章 [由搬家工具导入] 解决的方法有两种： 1.将title属性分成几行来写，例如：<a href=#" title=&q ...

  9. SQL Server 2005 无法连接到 127.0.0.1

    [问题描述]如果连接本机的数据库服务器,服务器名称可填: 127.0.0.1或localhost或本机机器全名(比如HOME),有时候用本机机器名可以登录SQL Server 2005,但用127.0 ...

  10. 修改linux 的bash 为zsh

    针对centos1.  yum -y install zsh git   2. git clone git://github.com/robbyrussell/oh-my-zsh.git ~/.oh- ...