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客戶端。