標籤：
（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;@Controllerpublic 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）
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
