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的代码片段,通常放置在绑定 ...
随机推荐
- python笔记-19 javascript补充、web框架、django基础
一.JavaScript的补充 1 正则表达式 1.1 test的使用 test 测试是否符合条件 返回true or false 1.2 exec的使用 exec 从字符串中截取匹配的字符 1.3 ...
- 【java基础】java中Object对象中的Hashcode方法的作用
以下是关于HashCode的官方文档定义: hashcode方法返回该对象的哈希码值.支持该方法是为哈希表提供一些优点,例如,java.util.Hashtable 提供的哈希表. hashCode ...
- 从数据库导出数据到excel之POI操作
项目说明: 1:数据库中有两张表,主键关联 2:根据条件查询数据 3:处理为需要的数据封装类型,然后传到导出excel的方法中 <--框架部署就不详谈了,用的spring框架--> 补充: ...
- Springboot的优点和实现
一 优点 1.创建独立的Spring应用程序 2.嵌入式的Tomcat,不需要部署war包 3.简化Maven配置 4.自动配置Spring 5.提供生产就绪型功能,如指标,健康检查,和外部配置 6. ...
- RabbitMQ概念
RabbitMQ 即一个消息队列,_主要是用来实现应用程序的异步和解耦,同时也能起到消息缓冲,消息分发的作用._RabbitMQ使用的是AMQP协议,它是一种二进制协议.默认启动端口 5672. 在 ...
- yum安装postgresql
https://wiki.postgresql.org/wiki/YUM_Installation
- bzoj 2597 [Wc2007]剪刀石头布——费用流
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=2597 三个人之间的关系,除了“剪刀石头布”,就是有一个人赢了2局:所以考虑算补集,则每个人对 ...
- openOffice转换的时候乱码在linux下使用openOffice的时候发现在转换后出现了乱码
openOffice转换的时候乱码 在linux下使用openOffice的时候发现在转换后出现了乱码,最后上网查了一下,按照网上的说法去试了试,最后也没有解决,也可能是我这边的linux的权限问题, ...
- async/await的一些用法
普通函数 string Func() { string x = X(); string y = Y(); string z = Z(); return x + y + z; } X(), Y(), Z ...
- CSS 属性单词
.container {padding:0px; height:90%; width:100%; margin:0;}#header {height:0px; width:100%; padding: ...