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"]
复制代码

 

posted on   BestNow  阅读(357)  评论(0)  编辑  收藏  举报

编辑推荐：
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
阅读排行：
· 周边上新：园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源！
· 分享 3 个 .NET 开源的文件压缩处理库，助力快速实现文件压缩解压功能！
· Ollama——大语言模型本地部署的极速利器
· DeepSeek如何颠覆传统软件测试？测试工程师会被淘汰吗？

导航

< 2025年3月 >
日 一 二 三 四 五 六
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5
点击右上角即可分享
微信分享提示
AI IDE Trae