用AI赚第一桶💰低成本搭建一套AI赚钱工具,源码可二开。 广告
# 使用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客户端。