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 ...
随机推荐
- easyui 右键绑定事件
$(function(){ $('#hospitalTree').bind('contextmenu', function(e) { e.preventDefault(); ...
- PAT1026
要获得一个C语言程序的运行时间,常用的方法是调用头文件time.h,其中提供了clock()函数,可以捕捉从程序开始运行到clock()被调用时所耗费的时间.这个时间单位是clock tick,即“时 ...
- 我的第一个python程序——猜数字
#Author:xiaoxiao age = 22 #标准正确答案 counter = 0 #计数器 for i in range(10): #循环10次 if counter < 3: gue ...
- 多IP指定出口IP地址 如何指定云服务器源IP?
如果一个主机绑定有多个IP地址,那么在被动响应和主动发起连接两种方式中,源IP地址的选择机制肯定是有所差异的.主机在接收外部数据包,并发送响应数据包时,响应源地址显然就是客户端请求的地址,这是非常容易 ...
- BZOJ 1497 最大获利（最大权闭合图）
1497: [NOI2006]最大获利 Time Limit: 5 Sec Memory Limit: 64 MB Submit: 4686 Solved: 2295 [Submit][Statu ...
- Codeforces Round #330 (Div. 2) B 容斥原理
B. Pasha and Phone time limit per test 1 second memory limit per test 256 megabytes input standard i ...
- HTML表格嵌套、合并表格
一.表格元素< table> table常用属性 border:边框像素 width,height:表格宽度/高度 bordercolor:表格边框颜色 bgcolor:表格背景颜色 二. ...
- Unity使用 16bit 压缩 Texture 颜色能均匀过渡
下面是unity自带 16bit 图 的效果,可以看到颜色过度的很不均匀,占用内存 0.5M 如果调成 truecolor 后 颜色过渡很均匀,而内存却占到 1.1 M 讲图片 后缀名改成 ...
- C#中的继承与覆盖
原文发布时间为:2009-03-03 -- 来源于本人的百度文章 [由搬家工具导入] //using System;//using System.Collections.Generic;using S ...
- C#TreeView读取Xml，TreeView导出到Xml
实现功能有1.根据Xml生成TreeView2.双击修改节点3.右键添加子节点或添加要节点4.右键删除当前选择的节点5.将修改后的TreeView重新生成Xml文档 其实这个主要是实现 了Xml生成T ...