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;
}

效果:

时间: 2024-11-08 19:01:19

AngularJS取得后台Jason数据显示在页面上的相关文章

dataTable的使用,接受json数据显示在页面上

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><h

ASP.NET WebForm中JavaScript修改了页面上Label的值,如何在后台代码中获取

在用ASP.NET WebForm开发一个项目时,遇到如下的一个情况 页面上有一个Textbox控件,还有2个Label 控件. 当Textbox控件中的值更改时,两个Label控件上的值做相应的更改, 这一点是通过页面中嵌入的JavaScript来实现的. 但是,Label控件上的值更改后,在后端.cs代码中,通过Label.Text 并不能取到更改后的值. order.aspx页面代码如下: <%@ Page Language="C#" AutoEventWireup=&qu

[译]用AngularJS构建大型ASP.NET单页应用(一)

原文地址:http://www.codeproject.com/Articles/808213/Developing-a-Large-Scale-Application-with-a-Single 渣译,各位看官请勿喷 引言: ... 单页面应用程序(SPA),被定义为在一个独立的页面上??提供类似于桌面应用程序级用户体验为目标的网站.在SPA, 基本上所有的代码 - 例如 HTML,JavaScript和CSS - 都是在响应用户操作时动态加载的.页面没有在任何时候被重新刷新,也没有跳转到另一

使用 AngularJS 开发一个大规模的单页应用(SPA)

本文的目标是基于单页面应用程序开发出拥有数百页的内容,包括认证,授权,会话状态等功能,可以支持上千个用户的企业级应用. 下载源代码 介绍 (SPA)这样一个名字里面蕴含着什么呢? 如果你是经典的Seinfeld电视秀的粉丝,那么你一定知道Donna Chang这个名字.Jerry跟Donna见面,Donna其实不是华人,但是却因在谈论其对中国的固有印象比如在针灸上的兴趣,以及偶然的一次单词发音带上了点儿中文口音,她将自己末尾的名字缩成了Chang Donna 在电话上同George的母亲交谈,(

【WPF学习笔记】之如何把数据库里的值读取出来然后显示在页面上:动画系列之(六)

...... 承接系列五 上一节讲了,已经把数据保存到数据库并且删除数据,本讲是把已经存在的数据从数据库里读取出来,显示在页面上. 主页面后台代码: using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Windows; using System.Windows.Controls; using System.Windows.Data; using Sys

简洁AngularJS框架后台管理系统bootstrap后台模板

最近在做一个后台管理的项目,但是没有设计图完全,所以就发现一款非常不错的模版. 这个模版是基于 AngularJS 和 bootstrap 的后台管理系统模版. Minovate是 AngularJS 高级管理系统模板.它建造在流行的Twitter Bootstrapv3框架上.Minovate完全基于HTML5 + CSS3标准.是充分响应的支持每一个设备和浏览器. Minovate包含许多示例页面可以使用它的元素和可定制的.你可以选择6种颜色的头部样式.导航.你可以切换固定导航,标题和选择等

如何把tomcat的日志实时输出到web页面上

最近做了一个web版的自动发布系统.实现了一个把tomcat的catlina.out日志输出到web页面的功能,做出来后,生活美好了一点.码农们不会再为了看日志来烦我了,以后有时间了准备扩展一下,把日志统一收集,过滤,让码农自己玩去,哈哈.作为一个运维狗,自动化一切,然后就有更多时间--了.省略号内容自行脑补. 先看效果 在部署状态页面点击查看日志,将会打开日志页面,下个图就是日志的输出页面. 简约时尚小清新的日志页面出来了,是不是很想一个terminal,有没有觉得俺弄的页面很漂亮.哈哈哈哈,

如何将 16进制字符串形式的图片显示到页面上

前言:如果数据库中存放的图片信息不是图片的链接,而是存放图片的16进制字符串(这种存放方式很low,很影响数据库查询效率,还是存放图片链接好).这时如果想要将图片显示在jsp页面上,java代码应该怎么处理了? 例如:(图片和它的16进制编码) 处理步骤: 1.后台代码剪辑 import cn.com.syan.spark.app.sdk.connect.utils.http.BASE64Encoder; //处理代码 BASE64Encoder encoder = new BASE64Enco

百度地图获取数据库点的坐标,并定时刷新到页面上

后台代码 先创建marker点的实体类(并利用Spring注解功能实现自动自动建表) 1 package com.sdtg.ditu.bean; 2 3 import javax.persistence.Column; 4 import javax.persistence.Entity; 5 import javax.persistence.GeneratedValue; 6 import javax.persistence.Id; 7 import javax.persistence.Tabl