AngularJS取得后台Jason数据显示在页面上
2017-08-23 23:16
417 查看
代码下载:https://files.cnblogs.com/files/xiandedanteng/angularjsAjax.rar
前台代码:
后台代码:
Member类代码:
效果:
前台代码:
<%@ 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; }
效果:
![](https://images2017.cnblogs.com/blog/162475/201708/162475-20170823231610949-902573533.png)
相关文章推荐
- ThinkPHP定时ajax获取后台数据,使用javascript动态修改前端页面的表格来显示数据
- FusionCharts动态获取后台json数据 页面显示
- jfreechart_fusioncharts_后台数据,页面图形显示
- Web页面实现后台数据处理进度与剩余时间的显示
- angularjs 查询到的数据显示在页面上
- 2017精华版:jquery 中 ajax,后台获取数据库json数据,显示在html页面 02
- struts2框架——从后台取得数据集,并在前台页面循环显示
- 使用echart从后台获取数据动态显示到页面
- jsp页面访问后台方法显示数据
- 第一次使用echart从后台获取数据动态显示到页面
- Ajax 异步或取后台数据json显示到页面
- 分享知识-快乐自己:SpringMvc后台Date对象数据 到 前台页面的显示转换
- 后台的一个值怎么数据绑定显示在前端页面
- jquery ajax刷新局部页面,取得数据后,动态的在前台显示
- [置顶] ajax请求到后台数据,前台不用拼接字符串append追加HTML标签,一样显示到页面 (使用空模板)
- [Ajax]便于在html页面中引用javascript显示后台数据的一段ajax代码
- jsp页面对后台数据动态搜索显示
- 黄聪:wordpress后台,修改数据表前缀之后显示“您没有足够的权限访问这个页面”的解决方法
- Jsp实现页面forEach循环遍历多条数据的显示和后台对应数据的获取(strurs1)实现
- 如何打开jsp页面时经过action从数据库取得数据显示在页面上