angularjs学习访问服务器（5）
（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）的更多相关文章
- Angularjs学习---官方phonecat实例学习angularjs step0 step1
接下来一系列的文章都是学习https://docs.angularjs.org/tutorial的笔记,主要学习的angular-phonecat项目的实现,来介绍angularjs的使用. 1.下载 ...
- angularJS学习资源最全汇总
基础 官方: http://docs.angularjs.org angularjs官方网站已被墙,可看 http://www.ngnice.com/: 官方zip下载包 https://github ...
- 我的AngularJS 学习之旅
我的AngularJS 学习之旅 基础篇 1.Angular的 起源 2.比较Web 页面实现的几种方式 3.一些基本术语 4.Angular与其他框架的兼容性 5.总结 6.综合实例 很早之前就 ...
- 推荐10个很棒的AngularJS学习指南
AngularJS 是非常棒的JS框架,能够创建功能强大,动态功能的Web app.AngularJS自2009发布以来,已经广泛应用于Web 开发中.但是对想要学习Angular JS 的人而言,只 ...
- Angularjs学习---ubuntu12.04中karma安装配置中常见的问题总结
karma启动时出现了很多问题: 1.安装karma前提条件 安装karma首先要安装nodejs,npm然后才可以安装karma.nodejs,npm的安装过程可以参考文章:Angularjs学习- ...
- AngularJs学习总结－了解基本特性（－）
现在的前端项目中基本上都会用到angularjs框架,之前并不了解这个框架,也是因为最近接手的项目,所以打算好好的学习下它.之前都是搞pc端,现在接手的是移动端的项目,移动端UI框架用的是ionic+ ...
- [整理]AngularJS学习资源
https://angular.io/docs/js/latest/(2.0官方网站) http://www.linuxidc.com/Linux/2014-05/102139.htm(Angular ...
- AngularJs学习笔记--Forms
原版地址:http://code.angularjs.org/1.0.2/docs/guide/forms 控件(input.select.textarea)是用户输入数据的一种方式.Form(表单) ...
- AngularJs学习笔记--expression
原版地址:http://code.angularjs.org/1.0.2/docs/guide/expression 表达式(Expressions)是类Javascript的代码片段,通常放置在绑定 ...
随机推荐
- 完美解决github访问速度慢[转]
1. 修改本地hosts文件 windows系统的hosts文件的位置如下:C:\Windows\System32\drivers\etc\hosts mac/linux系统的hosts文件的位置如下 ...
- BZOJ1495 [NOI2006]网络收费
题意 传送门 MY市NS中学,大概是绵阳市南山中学. 分析 参照Maxwei_wzj的题解. 因为成对的贡献比较难做,我们尝试把贡献算到每一个叶子节点上.我们发现按照题目中的收费方式,它等价于对于每棵 ...
- Nchan 实时消息内置变量
以下参考官方文档: $nchan_channel_idThe channel id extracted from a publisher or subscriber location requ ...
- 微软Enterprise Library 4.1和Unity 1.2
说明 微软模式与实践团队今天发布了Enterprise Library 4.1和Unity 1.2版本,这次发布的主要新特性如下: 1. 支持Visual Studio 2008 SP1 2. Uni ...
- Spark的CombineByKey
combineBykey关键是要明白里面的三个函数: 1. 当某个key第一次出现的时候,走的是第一个函数(createCombin):A function that creates a combin ...
- BZOJ3261：最大异或和
浅谈\(Trie\):https://www.cnblogs.com/AKMer/p/10444829.html 题目传送门:https://lydsy.com/JudgeOnline/problem ...
- hibernate规避SQL注入实例
项目被检测出SQL注入,注入url如:http://127.0.0.1:8080/Test/wlf/getServiceInfo.html?province=%25E6%25B5%2599%25E6% ...
- mysql存储引擎之innodb学习
innodb引擎特点1.支持事务:支持4个事务隔离级别,支持多版本读. 2.行级锁定(更新时一般是锁定当前行):通过索引实现,全表扫描仍然会是表锁,注意间隙 锁的影响 3.读写阻塞与事务隔离级别有关 ...
- MFC消息循环
MFC消息循环 MFC应用程序中处理消息的顺序 1.AfxWndProc() 该函数负责接收消息,找到消息所属的CWnd对象,然后调用AfxCallWndProc. 2.AfxCallWndProc ...
- [转]SVN 乱码问题
以下来自:http://godchenmeng.iteye.com/blog/797727 最近研究SVN.发现在创建补丁包的时候出现这种情况. 在文件顶部不论是什么代码都会变成乱码.在文件中如果有注 ...