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数据显示在页面上的更多相关文章
- PHP----作业：查询数据显示在页面上
作业: 查询INFO表所有数据,显示在页面上(表格)性别要显示男女 民族 显示民族名称 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tra ...
- ASP.NET WebForm中JavaScript修改了页面上Label的值，如何在后台代码中获取
在用ASP.NET WebForm开发一个项目时,遇到如下的一个情况 页面上有一个Textbox控件,还有2个Label 控件. 当Textbox控件中的值更改时,两个Label控件上的值做相应的更改 ...
- 数据量大的数据转换成jason并显示在页面上
代码列子: public ActionResult FindUserByUserId(SysMessageDTO model) { CustomResultMsg customResult = new ...
- 使用 AngularJS 开发一个大规模的单页应用（SPA）
本文的目标是基于单页面应用程序开发出拥有数百页的内容,包括认证,授权,会话状态等功能,可以支持上千个用户的企业级应用. 下载源代码 介绍 (SPA)这样一个名字里面蕴含着什么呢? 如果你是经典的S ...
- 【WPF学习笔记】之如何把数据库里的值读取出来然后显示在页面上：动画系列之（六）（评论处有学习资料及源码）
(应博友们的需要,在文章评论处有源码链接地址,以及WPF学习资料.工具等,希望对大家有所帮助) ...... 承接系列五 上一节讲了,已经把数据保存到数据库并且删除数据,本讲是把已经存在的数据从数据库 ...
- 简洁AngularJS框架后台管理系统bootstrap后台模板
最近在做一个后台管理的项目,但是没有设计图完全,所以就发现一款非常不错的模版. 这个模版是基于 AngularJS 和 bootstrap 的后台管理系统模版. Minovate是 AngularJS ...
- spring从服务器磁盘读取图片，然后显示于前端页面上
需求是,前台通过传参,确定唯一图片,然后后台在服务器磁盘中读取该图片,然后显示于前台页面上. 后台代码: @RequestMapping("unit/bill/showeinvoice&qu ...
- 把Employees显示在页面上
项目代码下载:https://files.cnblogs.com/files/xiandedanteng/gatling20200429-1.zip 需求:从后台DB取出雇员数据,显示在前台页面上: ...
- yaf将错误输出打印在页面上
修改项目的配置文件 文件是conf/application.ini 添加两行代码 application.dispatcher.throwException = 1 ;开启/关闭自动异常捕获功能 ap ...
随机推荐
- Python-伪私有属性
原文:http://blog.itpub.net/26250550/viewspace-1411768/ 通常在 Python 中,我们都被告知可以使用双下划线开头的方法名定义方法来达到私有函数的目标 ...
- oracle function用法
函数调用限制1.SQL语句中只能调用存储函数(服务器端),而不能调用客户端的函数2.SQL只能调用带有输入参数,不能带有输出,输入输出函数3.SQL不能使用PL/SQL的特有数据类型(boolean, ...
- BZOJ 3990： [SDOI2015]排序（搜索+剪枝）
[SDOI2015]排序 Description 小A有一个1-2^N的排列A[1..2^N],他希望将A数组从小到大排序,小A可以执行的操作有N种,每种操作最多可以执行一次,对于所有的i(1< ...
- 习题：八数码难题（双向BFS）
八数码难题(wikioi1225) [题目描述] 在3×3的棋盘上,摆有八个棋子,每个棋子上标有1至8的某一数字.棋盘中留有一个空格,空格用0来表示.空格周围的棋子可以移到空格中.要求解的问题是:给出 ...
- 为MYSQL加注释--mysql注释符
上午插入记录的时候一直没有成功,郁闷不知道为什么.因为是很多条记录一起插入,中间一些不用的数据就用"--"来注释了,结果没有效果. 没有办法,在网上找了找,才发现注释符" ...
- Session 存储和失效方式
Session 一般的操作是放在本地的Asp.net StatService上.实现进程隔离,方便Session操作,下面说说Session各属性. 1)不使用Session <sessionS ...
- 【HDOJ5514】Frogs（容斥原理）
题意:n个青蛙在一个有m个节点的圆上跳,m个节点的标号为0-m-1,每只青蛙每次跳的节点数给出,让求n只青蛙所跳位置标号之和 n<=1e4,m<=1e9,a[i]<=1e9 思路:由 ...
- 【HDOJ5510】Bazinga（KMP）
题意:给定n个由小写字母组成的字符串,第i个字符串为a[i],求最大的j满足存在1<=i<j,a[i]不是a[j]的子串,无解输出-1 T<=50,n<=500,len[i]& ...
- [LeetCode] Find Peak Element 二分搜索
A peak element is an element that is greater than its neighbors. Given an input array where num[i] ≠ ...
- jdk、maven、tomcat环境变量配置
1.jdk 新建环境变量: JAVA_HOME:C:\Program Files\Java\jdk1.8.0_91 CLASSPATH:.;%JAVA_HOME%\lib;%JAVA_HOME%\li ...