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;
}
复制代码

效果:

 















本文转自张昺华-sky博客园博客,原文链接:http://www.cnblogs.com/xiandedanteng/p/7420770.html,如需转载请自行联系原作者

相关文章
|
4月前
|
前端开发 数据安全/隐私保护
angular前端基本页面验证
angular前端基本页面验证
44 1
|
6月前
|
JavaScript
如何使用 ControlValueAccessor 在 Angular 中创建自定义表单控件
如何使用 ControlValueAccessor 在 Angular 中创建自定义表单控件
31 0
|
JavaScript 前端开发 API
Angular1.4.6框架简单读取数据库信息并渲染完成news新闻文章列表以及detail详情页功能(小试牛刀)
Angular1.4.6框架简单读取数据库信息并渲染完成news新闻文章列表以及detail详情页功能(小试牛刀)
|
JSON 前端开发 JavaScript
angularjs购物车功能(全)包含 (修改,添加等功能)
angularjs购物车功能(全)包含 (修改,添加等功能)
46 0
|
前端开发 数据安全/隐私保护 CDN
Angular最新教程-第六节编写响应式导航栏
Angular最新教程-第六节编写响应式导航栏
440 0
Angular最新教程-第六节编写响应式导航栏
|
JavaScript 容器
AngularJS----服务,表单,模块
AngularJS----服务,表单,模块
146 0
AngularJS----服务,表单,模块
|
JSON 负载均衡 JavaScript
VS Code 折腾记 - (8) 新一波实用插件推荐(前端)|NG2+|TS2|Vue|React|Node|版本控制|主题
VSCode大法好啊,平均一个月更新一个小版本,每次都可以直观的看到优化的地方和特性。 距离上次的文章已经过去了两个多月了。这期间我又搜罗了一波比较实用的插件推荐;
274 0
|
存储 缓存 前端开发
Hooks + TS 搭建一个任务管理系统(一)-- 登录注册页面
Hooks + TS 搭建一个任务管理系统(一)-- 登录注册页面
406 0
Hooks + TS 搭建一个任务管理系统(一)-- 登录注册页面
|
JavaScript 容器 数据挖掘
Angularjs 与三方js插件配合使用,并通过模板动态解析angularjs 语法
在一个静态见面上做数据分析,由于前后端分离 前端使用Angularjs框架,后端使用RESTFUL,如图
2716 0
|
JavaScript 前端开发
【曹操】 angular js双向绑定数据通过bootstrap请求获取不到表单数据
在做项目的时候,在VidyoCallFlowEntry页面中,通过name字段双击跳转弹出VidyoCallFlow页面,同时传入name的值作为参数进行查询,并展示查询结果。但在路由中获取到name的值,通过angular js双向绑定的方式赋值给VidyoCallFlow页面的vidyoname的值,发现并没有查询到结果,但是根据该name的值在数据库中查询,是有结果的。
1516 0

热门文章

最新文章