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的代码片段,通常放置在绑定 ...
随机推荐
- NET Core项目模板
打造自己的.NET Core项目模板 https://www.cnblogs.com/catcher1994/p/10061470.html 前言 每个人都有自己习惯的项目结构,有人的喜欢在项目里面建 ...
- C++ sort 函数用法
MSDN中的定义: template<class RanIt>void sort(RanIt first, RanIt last); //--> 1)template<clas ...
- For input string: "null"
java.lang.NumberFormatException: For input string: "null" 在开发中你是否遇到过这样的问题,不管请求到的值是什么都能进入不为 ...
- Appium 定位方法例子（4）
有朋友留言反应定位不到元素,没错,船长也为这个一直在头疼,我用的App是原生安卓+webService+h5类型的,定位虽然没问题,但是在进行操作的时候各种不通过……真的很头疼啊……我这里说的“操作” ...
- 异步加载JS几种方式
默认情况javascript是同步加载的,也就是javascript的加载时阻塞的,后面的元素要等待javascript加载完毕后才能进行再加载,对于一些意义不是很大的javascript,如果放在页 ...
- 在Eclipse中导入dtd和xsd文件，使XML自动提示
DTD 类型约束文件 1. Window->Preferences->XML->XML Catalog->User Specified Entries窗口中,选择Add ...
- Android模糊图像
在Android中.我们能够实现非常多非常酷的处理图片的效果. 在2014年某次会议的讲演<图像的魔力>中,我介绍了当中的一部分. 当中的一项技术是怎样模糊图像.演示样例代码是使用Rend ...
- 微信开发 api 需要 https 服务器
微信开发 api 需要 https 服务器 先建一个环境,本地的 https 服务器. 以下这篇不错,很完整. https://zhuanlan.zhihu.com/p/23640321
- Time complexity--codility
lesson 3: Time complexity exercise: Problem: You are given an integer n. Count the total of 1+2+...+ ...
- 【常见Web应用安全问题】---4、Directory traversal
Web应用程序的安全性问题依其存在的形势划分,种类繁多,这里不准备介绍所有的,只介绍常见的一些. 常见Web应用安全问题安全性问题的列表: 1.跨站脚本攻击(CSS or XSS, Cross Si ...