码迷,mamicode.com
首页 > Web开发 > 详细

AngularJS取得后台Jason数据显示在页面上

时间:2017-08-24 00:16:06      阅读:270      评论:0      收藏:0      [点我收藏+]

标签:代码下载   rpo   body   min   data   getc   repeat   ima   expires   

代码下载: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数据显示在页面上

标签:代码下载   rpo   body   min   data   getc   repeat   ima   expires   

原文地址:http://www.cnblogs.com/xiandedanteng/p/7420770.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!