使用jQuery消费RESTful Web服务

你会建立什么

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

jQuery客户端将通过index.html在浏览器中打开文件来访问，并将在以下位置使用接受请求的服务：

http://rest-service.guides.springref.com/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.springref.com/greeting"
    }).then(function(data) {
       $('.greeting-id').append(data.id);
       $('.greeting-content').append(data.content);
    });
});

该控制器模块表示为简单的JavaScript函数。它使用jQuery的$.ajax()方法在http://rest-service.guides.springref.com/greeting上使用REST服务。如果成功，它将为分配接收到的JSON data，从而有效地使其成为Greeting模型对象。然后将id和content分别附加到greeting-id和greeting-contentDOM元素。

注意jQuery promise的使用.then()。这指示jQuery在$.ajax()方法完成时执行匿名函数，并传递data来自已完成的AJAX请求的结果。

创建应用程序页面

现在有了jQuery控制器，您将创建HTML页面，该页面会将客户端加载到用户的Web浏览器中：

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运行app.groovy

应用启动后，在浏览器中打开http：// localhost：8080，您会在其中看到：

每次刷新页面时，ID值都会增加。

概括

恭喜你！您刚刚开发了使用基于Spring的RESTful Web服务的jQuery客户端。

也可以看看

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

是否要编写新指南或为现有指南做出贡献？查看我们的贡献准则。

所有指南均以代码的ASLv2许可证和写作的Attribution，NoDerivatives创用CC许可证发布。