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 ...
随机推荐
- 【转】unity自带寻路Navmesh入门教程（一）
http://liweizhaolili.blog.163.com/blog/static/16230744201271161310135/ 说明:从今天开始,我阿赵打算写一些简单的教程,方便自己日后 ...
- iOS-绘制UIView之drawCGRect
写在前面 UIView对于iOS开发来讲,再熟悉不过了.也正是因为这一点,我们可能会忽略UIView一些特有方法的理解和使用.今天,笔者主要整理一下对drawRect方法的理解和使用. 默认情况下,该 ...
- git filter-branch应用
1.修改author和committer git filter-branch --commit-filter ' export GIT_AUTHOR_EMAIL=me@example.com; exp ...
- GROUP BY子句的查询中显示COUNT()为0的结果
含有GROUP BY子句的查询中如何显示COUNT()为0的结果 在SQL Server数据库查询中,为了对查询结果进行对比.分析,我们经常会用到GROUP BY子句以及COUNT()函数来对查询结果 ...
- 基于深度摄像头的障碍物检测（realsense+opencv）
前几天老大给了个任务,让我帮slam组写一个基于深度摄像头的障碍物检测,捣鼓了两天弄出来了,效果还不错,就在这里记一下了. 代码的核心思路是首先通过二值化,将一米之外的安全距离置零不考虑,然后通过开运 ...
- ajax跨域两个方法
1在后端转换,调用API. ajax瀑布流: <!DOCTYPE html> <html> <head> <meta charset="UTF-8& ...
- git ssh 生成步骤
Git是分布式的代码管理工具,远程的代码管理是基于SSH的,所以要使用远程的Git则需要SSH的配置. github的SSH配置如下: 一 . 设置Git的user name和email: $ git ...
- jdk、maven、tomcat环境变量配置
1.jdk 新建环境变量: JAVA_HOME:C:\Program Files\Java\jdk1.8.0_91 CLASSPATH:.;%JAVA_HOME%\lib;%JAVA_HOME%\li ...
- hdu 1548(最短路)
A strange lift Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)To ...
- 16Aspx.com-将15位身份证转换成18位
//********************************************************************************* //将15位身份证转换成18位时 ...