使用jQuery消费RESTful Web服务-SpringForAll社区

原文：Consuming a RESTful Web Service with jQuery，译者：william-hyx，校对：feilangrenM

本文将引导你开发一个简单的jQuery客户端，它可以消费基于Spring MVC的RESTful web服务。

你将构建什么

你将构建一个jQuery客户端用于消费基于Spring的RESTful web服务。需要指出的是，客户端将消费的是根据Building a RESTful Web Service with CORS创建的web服务。

在你的浏览器中打开index.html文件即可访问此jQuery客户端，同时通过以下地址来接收请求消费Web服务：

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

该服务将返回一个JSON格式的问候语：

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

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

你需要什么

大约15分钟时间
一个喜欢的编辑器
一个现代web浏览器
可以访问到互联网

创建一个jQuery Controller

首先，你需要创建一个用于调用REST服务的jQuery controller模块：

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);
    });
});

该controller模块可看作一个简单的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 controller，接下来需要创建加载客户端到用户web浏览器的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到项目中。第二个标签从应用路径中加载controller代码(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(Command Line Interface)包含一个内置的Tomcat服务器，它提供了一种简单的方式运行web内容。参见Building an Application with Spring Boot获取更多关于安装和使用CLI的信息。

为了使用Spring Boot中内置的Tomcat服务器托管静态内容，你还需要编写少量web应用代码以便让Spring Boot知道需要为应用程序启动Tomcat。下面app.groovy 脚本可以有效的启动Spring Boot中的Tomcat:

app.groovy

@Controller class JsApp {}

你现在可以使用Spring Boot CLI运行该app:

spring run app.groovy

当该app启动后，在你的浏览器中打开http://localhost:8080，你将看到如下内容：

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

总结

恭喜！你已开发了一个消费基于Spring的RESTful web服务的jQuery客户端。

其他参考资料

本文由spring4all.com翻译小分队创作，采用知识共享-署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。