入门·使用jQuery使用RESTful Web服务

你会建立什么

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

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

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()使用REST服务的方法，网址为http://rest-service.guides.spring.io/greeting 。如果成功，它将把接收到的JSON分配给data ，有效地使其成为Greeting模型对象。的id和content然后附加到greeting-id和greeting-content DOM元素分别。

注意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>

请注意以下两个脚本标记部分。

<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）。

另请注意

标签包括class属性。

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

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

运行客户端

要运行客户端，您需要将其从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 ，您会在其中看到：

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

摘要

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

也可以看看

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

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

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

使用jQuery消费RESTful Web服务