原标題:Spring國際認證指南|了解如何使用 jQuery 檢索網頁資料。

本指南将引導您編寫一個使用基于 Spring MVC 的RESTful Web 服務的簡單 jQuery 用戶端。
你将建造什麼
您将建構一個使用基于 Spring 的 RESTful Web 服務的 jQuery 用戶端。具體來說,用戶端将使用在使用 CORS 建構 RESTful Web 服務中建立的服務。
将通過index.html在浏覽器中打開檔案來通路 jQuery 用戶端,并将在以下位置使用接受請求的服務:
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 的方法來使用
http://rest-service.guides.spring.io/greeting$.ajax()上的 REST 服務。如果成功,它會将接收到的 JSON 配置設定給,進而有效地使其成為模型對象。和然後分别附加到和DOM 元素。dataGreetingidcontentgreeting-idgreeting-content
注意 jQuery 承諾的使用.then()。這訓示 jQuery 在方法完成時執行匿名函數,并從完成的 AJAX 請求中$.ajax()傳遞結果。data
建立應用程式頁面
現在您有了一個 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 元素并使用從 REST 服務接收到的 JSON的值id和屬性更新文本。content
運作用戶端
要運作用戶端,您需要将它從 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 運作該應用程式:
春季運作 app.groovy
應用程式啟動後,在浏覽器中打開http://localhost:8080 ,您會在其中看到: