jquery消费restful · springboot官方文档中文版

# 使用jQuery消费RESTful Web服务本指南将引导您编写一个简单的jQuery客户端，该客户端使用基于Spring MVC的 [RESTful Web服务](https://spring.io/understanding/REST) 。 ## 你会建立什么您将构建一个使用基于Spring的RESTful Web服务的jQuery客户端。具体来说，客户端将使用在服务中创建的 [使用CORS构建RESTful Web 服务](https://spring.io/guides/gs/rest-service-cors/) 。 jQuery客户端将通过打开 `index.html` 文件在您的浏览器中，并在以下位置使用接受请求的服务： ~~~ http://rest-service.guides.spring.io/greeting ~~~ 该服务将以的响应 [JSON](https://spring.io/understanding/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](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> ~~~ 请注意以下两个脚本标记 `<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元素，并使用来自的值更新文本。 `id` 和 `content` 从REST服务接收的JSON的属性。 ## 运行客户端要运行客户端，您需要将其从Web服务器提供给浏览器。 Spring Boot CLI（命令行界面）包括一个嵌入式Tomcat服务器，它提供了一种简单的方法来提供Web内容。请参见 [使用Spring Boot构建应用程序](https://spring.io/guides/gs/spring-boot/) 有关安装和使用CLI的更多信息，。为了从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](http://localhost:8080) 在浏览器中，您会在其中看到： ![从REST服务检索的模型数据将呈现到DOM中。](https://raw.githubusercontent.com/spring-guides/gs-consuming-rest-jquery/master/images/hello.png) 每次刷新页面时，ID值都会增加。 ## 概括恭喜你！您刚刚开发了使用基于Spring的RESTful Web服务的jQuery客户端。