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的代码片段,通常放置在绑定 ...
随机推荐
- pip 在windows下的更新升级
1. pip 在 PyCharm 无法自动更新 2. https://pip.pypa.io/en/latest/installing.html 官方网页要求在 cmd中输入以下命令进行 pip的 ...
- pat甲级 1152 Google Recruitment （20 分）
In July 2004, Google posted on a giant billboard along Highway 101 in Silicon Valley (shown in the p ...
- WinForm 窗体初始位置篇
1.在C#中,From本身有个StartPosition属性可以控制居中显示. StartPosition 默认值是WindowsDefaultLocation ,我们只需要改成CenterScree ...
- luvcview,使用mplayer查看摄像头和luvcview保存YUV图像视频的播放（转）
luvcview,使用mplayer查看摄像头和luvcview保存YUV图像视频的播放 在mplayer中查看摄像头,可使用如下命令:mplayer tv:// -tv driver=v4l2:in ...
- 如何使用JSON格式 POST数据到服务器
1． JSON的数据格式a) 按照最简单的形式,可以用下面这样的 JSON 表示名称/值对: { "firstName": "Brett" } b) 可以创建包 ...
- Unit01： JDBC原理 、 JDBC基础编程
Unit01: JDBC原理 . JDBC基础编程 这个文件里面有两块内容: 1.用比较麻烦的方式连接数据库,test1(),test4() 2.创建DBTool,测试DBTool连接数据库 ,tes ...
- JAVASE02-Unit011： TCP通信（小程序）
TCP通信(小程序) server端: package chat; import java.io.BufferedReader; import java.io.IOException; import ...
- laravel里面的一些变量
laravel5里面一些配置,比如数据库,debug的,实际上在项目的.env里面定义过了 //forge是默认值 'database' => env('DB_DATABASE', 'forge ...
- Sentinel-dashboard
Dashboard控制台 sentinel-dashboard是一个单独的应用,通过spring-boot进行启动,主要提供一个轻量级的控制台,它提供机器发现.单机资源实时监控.集群资源汇总,以及规则 ...
- 安装Elastix-2.4版本
首先,下载Elastix地址:http://www.elastix.org,下载里面的2.4版本 第一步:选择安装,Enter 选择语言,默认就行 选择us,默认 选择全部 选择默认分区,点击OK 配 ...