(1) 后台AngularController.java代码

package com.amy.controller;

import java.util.ArrayList;
import java.util.List; import net.sf.json.JSONArray; import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody; @Controller
public class AngularController { /**
* 获取所有客户信息
*
* @return
*/
@RequestMapping(value = "/angular/postCustomersList", method = RequestMethod.POST, produces = "text/html;charset=UTF-8")
@ResponseBody
public String postCustomersList(String userName) {
System.out.println(userName);
List<String> customers = new ArrayList<>();
customers.add("post");
customers.add("张三");
customers.add("李四");
customers.add("老王");
customers.add("老张");
customers.add("amy");
JSONArray array = JSONArray.fromObject(customers);
System.out.println(array.toString());
return array.toString();
} @RequestMapping(value = "/angular/getCustomersList", method = RequestMethod.GET, produces = "text/html;charset=UTF-8")
@ResponseBody
public String getCustomersList(String userName) {
System.out.println(userName);
List<String> customers = new ArrayList<>();
customers.add("get");
customers.add("张三");
customers.add("李四");
customers.add("老王");
customers.add("老张");
customers.add("amy");
JSONArray array = JSONArray.fromObject(customers);
System.out.println(array.toString());
return array.toString();
} @RequestMapping(value = "/angular/customersList", method = RequestMethod.GET)
public String CustomersList() {
return "angular/customerList";
}
}

(2)customerList.jsp页面

<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core"%>
<%@ 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>
<head>
<base href="<%=basePath%>"> <title>My JSP 'customerList.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">
<script type="text/javascript"
src="<c:url value='/jslib/jquery-1.7.2.js'/>"></script> <script type="text/javascript" src="<c:url value='/jslib/json2.js'/>"></script> <script type="text/javascript"
src="<c:url value='/jslib/angular-1.2.5.min.js'/>"></script> <script type="text/javascript"
src="<c:url value='/js/customerList.js'/>"></script>
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
--> </head>
<body> <div ng-app="myApp" ng-controller="postCustomersController">
<h3>post查询</h3>
<ul>
<li ng-repeat="x in names">{{x}}</li>
</ul>
</div> <div ng-app="myApp" ng-controller="getCustomersController">
<h3>get查询</h3>
<ul>
<li ng-repeat="x in names">{{x}}</li>
</ul>
</div>
</body>
</html>

(3)customerList.js代码

/**
* 客户信息列表
*/ var app = angular.module("myApp", []); // post方法
app.controller("postCustomersController", function($scope, $http){ // 原谅我吧,我不知道这一句是用来干什么的。换成将text换成‘’,似乎也没有什么影响
// 但是必须有
var postData = {
text:'long blob of text'
}; var myData = {
userName : "张三"
};
$http.post("angular/postCustomersList",postData, {params:myData}).success(function(data, status, headers, config) {
$scope.names = data;
}).error(function(data, status, headers, config) {
console.log(data);
console.log(status);
console.log(headers);
console.log(config);
});
}); // get方法获取数据
app.controller("getCustomersController", function($scope, $http){
$http.get("angular/getCustomersList", {params:
{userName : "张三"}
}).success(function(data, status, headers, config) {
$scope.names = data;
}).error(function(data, status, headers, config) {
console.log(data);
console.log(status);
console.log(headers);
console.log(config);
});
});

(4)测试

  输入地址:http://localhost:8080/SpringMVC01/angular/customersList

  页面展示为:

  

  说明:只有post方法进入后台了,推测controller一个页面只有一个。

后台打印的代码如下:

张三
["post","张三","李四","老王","老张","amy"]
张三
["post","张三","李四","老王","老张","amy"]
张三
["post","张三","李四","老王","老张","amy"]
张三
["post","张三","李四","老王","老张","amy"]
张三
["post","张三","李四","老王","老张","amy"]

angularjs学习访问服务器(5)的更多相关文章

  1. Angularjs学习---官方phonecat实例学习angularjs step0 step1

    接下来一系列的文章都是学习https://docs.angularjs.org/tutorial的笔记,主要学习的angular-phonecat项目的实现,来介绍angularjs的使用. 1.下载 ...

  2. angularJS学习资源最全汇总

    基础 官方: http://docs.angularjs.org angularjs官方网站已被墙,可看 http://www.ngnice.com/: 官方zip下载包 https://github ...

  3. 我的AngularJS 学习之旅

    我的AngularJS 学习之旅 基础篇 1.Angular的 起源 2.比较Web 页面实现的几种方式 3.一些基本术语 4.Angular与其他框架的兼容性 5.总结 6.综合实例   很早之前就 ...

  4. 推荐10个很棒的AngularJS学习指南

    AngularJS 是非常棒的JS框架,能够创建功能强大,动态功能的Web app.AngularJS自2009发布以来,已经广泛应用于Web 开发中.但是对想要学习Angular JS 的人而言,只 ...

  5. Angularjs学习---ubuntu12.04中karma安装配置中常见的问题总结

    karma启动时出现了很多问题: 1.安装karma前提条件 安装karma首先要安装nodejs,npm然后才可以安装karma.nodejs,npm的安装过程可以参考文章:Angularjs学习- ...

  6. AngularJs学习总结-了解基本特性(-)

    现在的前端项目中基本上都会用到angularjs框架,之前并不了解这个框架,也是因为最近接手的项目,所以打算好好的学习下它.之前都是搞pc端,现在接手的是移动端的项目,移动端UI框架用的是ionic+ ...

  7. [整理]AngularJS学习资源

    https://angular.io/docs/js/latest/(2.0官方网站) http://www.linuxidc.com/Linux/2014-05/102139.htm(Angular ...

  8. AngularJs学习笔记--Forms

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/forms 控件(input.select.textarea)是用户输入数据的一种方式.Form(表单) ...

  9. AngularJs学习笔记--expression

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/expression 表达式(Expressions)是类Javascript的代码片段,通常放置在绑定 ...

随机推荐

  1. Javascript学习笔记:3种递归函数中调用自身的写法

    ①一般的通过名字调用自身 function sum(num){ if(num<=1){ return 1; }else{ return num+sum(num-1); } } console.l ...

  2. C# 对List&lt;T&gt;取交集、连集及差集

    1. 取交集 List A :{1,5,9,3,7} List B:{1,6,8,5,3,2,9,4} var intersectedList = listA.Intersect(listB, new ...

  3. 【Hadoop】HIVE 小结概览

    一.HIVE概览小结 二.HIVE安装 Hive只在一个节点上安装即可 .上传tar包 .解压 tar -zxvf hive-.tar.gz -C /cloud/ .配置mysql metastore ...

  4. 转:python webdriver 环境搭建

    第一节 环境搭建准备工具如下:-------------------------------------------------------------下载 python[python 开发环境]ht ...

  5. jdom学习读取XML文件

    用JDOM读取XML文件需先用org.jdom.input.SAXBuilder对象的build()方法创建Document对象,然后用Document类.Element类等的方法读取所需的内容.IB ...

  6. 【20190407】JavaScript-indexOf方法解析

    在JavaScript中,字符串类型String和数组类型Array都有indexOf()方法,虽然他们的作用都是返回传入元素在指定字符串或数组中的位置,但他们之间还是存在着一点点不同. Str.in ...

  7. SQLAlchemy中解决数据库访问时出现的Incorrect string value: xxx at row 484

    报错信息:Warning: (1366, "Incorrect string value: ‘\\xD6\\xD0\\xB9\\xFA\\xB1\\xEA...‘ for column ‘V ...

  8. Momenta电话面试笔记

  9. 文本分类学习 (十)构造机器学习Libsvm 的C# wrapper(调用c/c++动态链接库)

    前言: 对于SVM的了解,看前辈写的博客加上读论文对于SVM的皮毛知识总算有点了解,比如线性分类器,和求凸二次规划中用到的高等数学知识.然而SVM最核心的地方应该在于核函数和求关于α函数的极值的方法: ...

  10. sqlserver的数据库状态——脱机与联机

    1.数据库状态: online:可以对数据库进行访问 offline:数据库无法访问 2.查看数据库状态的方法: (1)使用查询语句: SELECT state_desc FROM SYS.datab ...