使用 jQuery 消费 RESTful Web 服务 - springboot guide中文文档

本指南将引导您创建一个简单的 jQuery 客户端，用于消费基于 Spring MVC 的 RESTful 网络服务。

你要构建的内容

你将构建一个 jQuery 客户端来消费基于 Spring 的 RESTful 网络服务。具体来说，该客户端将消费在使用 CORS 构建 RESTful Web 服务中创建的服务。

可以通过在浏览器中打开 index.html 文件来访问 jQuery 客户端，它会消耗在以下地址接受请求的服务。

http://rest-service.guides.spring.io/greeting

服务将以 JSON 格式返回一条问候消息：

{"id":1,"content":"Hello, World!"}

jQuery客户端会将ID和内容渲染到DOM中。

所需工具

大约 15 分钟
常用的文字编辑器
一个现代网页浏览器
互联网连接

创建jQuery控制器

首先，您将创建一个用于消费REST服务的jQuery控制器模块。

public/hello.js

$(document).ready(function() {
    $.ajax({
        url: "http://rest-service.guides.spring.io/greeting"
    }).then(function(data) {
       $('.greeting-id').append(data.id);
       $('.greeting-content').append(data.content);
    });
});

这个控制器模块是一个简单的 JavaScript 函数。它使用 jQuery 的 $.ajax() 方法来调用位于 http://rest-service.guides.spring.io/greeting 的 REST 服务。如果请求成功，接收到的 JSON 数据将被赋值给 data 变量，并将其转换为一个 Greeting 模型对象。然后，id 和 content 分别追加到 greeting-id 和 greeting-content DOM 元素中。

注意到了 jQuery 中的 promise .then() 的使用。它会指示 jQuery 在 $.ajax() 方法完成后，执行匿名函数并传递该完成请求的 data 结果。

创建应用程序页面

现在你已经拥有一个 jQuery 控制器，接下来将创建一个 HTML 页面，在用户浏览器中加载客户端。

public/index.html

<!DOCTYPE html>
<html>
    <head>
        <title>Hello jQuery</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script src="hello.js"></script>
    </head>

    <body>
        <div>
            <p class="greeting-id">The ID is </p>
            <p class="greeting-content">The content is </p>
        </div>
    </body>
</html>

请注意位于<head>部分内的以下两个脚本标签。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="hello.js"></script>

第一个脚本标签从内容分发网络（CDN）加载最小化的 jQuery 库（jquery.min.js），这样你就无需自己下载和放置 jQuery 文件。此外，它还会从应用程序路径中加载控制器代码（hello.js）。

还需注意的是，<p> 标签包含 class 属性。

<p class="greeting-id">The ID is </p>
<p class="greeting-content">The content is </p>

这些 class 属性帮助 jQuery 引用 HTML 元素，并使用从 REST 服务接收到的 JSON 中的 id 和 content 属性的值来更新文本。

运行客户端

要运行客户端，你需要通过一个 Web 服务器将其提供给浏览器。Spring Boot CLI（命令行接口）包含了一个嵌入式的 Tomcat 服务器，这为提供 Web 内容提供了一种简单的方法。有关安装和使用 CLI 的更多信息，请参见使用 Spring Boot 构建应用程序。

为了从 Spring Boot 嵌入式的 Tomcat 服务器提供静态内容，你需要创建一些 web 应用程序代码，以便 Spring Boot 知道要启动 Tomcat。以下 app.groovy 脚本足以让 Spring Boot 知道你想要运行 Tomcat：

app.groovy

@Controller class JsApp { }

你现在可以使用 Spring Boot CLI 来运行应用程序。

spring run app.groovy

一旦应用程序启动，请在浏览器中访问 http://localhost:8080，你将会看到：

Model data retrieved from the REST service is rendered into the DOM.

每次你刷新页面时，ID值会自动增加。

摘要

恭喜！你刚刚开发了一个使用 jQuery 的客户端，用于消费基于 Spring 的 RESTful Web 服务。

参见

以下指南可能也会有所帮助：