代码下载：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. java 获取请求的完整url地址

    String url=request.getRequestURL()+"?"+request.getQueryString();

  2. Pointcut is not well-formed: expecting 'name pattern' at character position 53

    报错内容: org.springframework.beans.factory.BeanCreationException: Error creating bean with name 'dataso ...

  3. Codeforces #1063C Dwarves, Hats and Extrasensory Abilities

    题目大意 交互题. 输出平面上的一个点的坐标,交互程序给这个点染色(白或黑). 如此重复 $n$ 次($ 1\le n \le 30$). 要求输出的 $n$ 个点各不相同,并且不论交互程序怎样给它们 ...

  4. HDU 5884 Sort（二分答案+计算WPL的技巧）

    Sort Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total Submi ...

  5. 一个javascript继承和使用的例子

    继承可以帮助我们实现代码的重用,把对象的属性写入构造函数,对象的方法写入原型后,以下例子演示继承的使用: 示例的css和js在后 父实例,得到一个间隔1s的轮播: <!DOCTYPE html& ...

  6. ThreadPool基础之RegisterWaitForSingleObject

    原文发布时间为:2010-10-27 -- 来源于本人的百度文章 [由搬家工具导入] 首先我们看一下它的原型： Codepublic static RegisteredWaitHandle Regis ...

  7. [转].net创建XML文件的两种方法

    原文发布时间为:2009-08-26 -- 来源于本人的百度文章 [由搬家工具导入] 方法一：按照XML的结构一步一步的构建XML文档.    通过.Net FrameWork SDK中的命名空间&q ...

  8. 学习 表单验证插件validate

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. 关于百度富文本编辑器UEdit的初始化内容失败问题

    百度富文本编辑器毫无疑问是强大的,但也会出问题.这个问题是在脚本中普遍存在的,由异步性导致的加载顺序问题. 我们使用 var ue = UE.getEditor('editor', {}); 创建实例 ...

  10. [SaltStack] salt-minion启动流程

    SaltStack源码阅读 前面理了下salt-master的启动流程, 这次来看看salt-minion的启动流程. 启动salt-minion方法: /etc/init.d/salt-minion ...