Spring國際認(rèn)證指南｜使用JQuery 使用 RESTful Web 服務(wù)
你將建造什么
您將構(gòu)建一個(gè)使用基于 Spring 的 RESTful Web 服務(wù)的 jQuery 客戶端。具體來說，客戶端將使用在使用 CORS 構(gòu)建 RESTful Web 服務(wù)中創(chuàng)建的服務(wù)。
將通過index.html在瀏覽器中打開文件來訪問 jQuery 客戶端，并將在以下位置使用接受請求的服務(wù)：
http://rest-service.guides.spring.io/greeting。
該服務(wù)將以JSON表示的問候進(jìn)行響應(yīng)：
{"id":1,"content":"Hello, World!"}復(fù)制
jQuery 客戶端會(huì)將 ID 和內(nèi)容呈現(xiàn)到 DOM 中。
你需要什么
- 約15分鐘。
- 最喜歡的文本編輯器。
- 現(xiàn)代網(wǎng)絡(luò)瀏覽器。
- 互聯(lián)網(wǎng)連接。
創(chuàng)建一個(gè) jQuery 控制器
首先，您將創(chuàng)建將使用 REST 服務(wù)的 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);
});
});復(fù)制
此控制器模塊表示為一個(gè)簡單的 JavaScript 函數(shù)。它使用 jQuery 的方法來使用
http://rest-service.guides.spring.io/greeting$.ajax()上的 REST 服務(wù)。如果成功，它會(huì)將接收到的 JSON 分配給，從而有效地使其成為模型對象。和然后分別附加到和DOM 元素。
dataGreetingidcontentgreeting-idgreeting-content。
注意 jQuery 承諾的使用.then()。這指示 jQuery 在方法完成時(shí)執(zhí)行匿名函數(shù)，并從完成的 AJAX 請求中$.ajax()傳遞結(jié)果。data
創(chuàng)建應(yīng)用程序頁面
現(xiàn)在您有了一個(gè) jQuery 控制器，您將創(chuàng)建 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>復(fù)制
請注意該部分中的以下兩個(gè)腳本標(biāo)記<head>。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="hello.js"></script>復(fù)制
第一個(gè)腳本標(biāo)簽從內(nèi)容交付網(wǎng)絡(luò) (CDN) 加載縮小的 jQuery 庫 (jquery.min.js)，這樣您就不必下載 jQuery 并將其放置在您的項(xiàng)目中。它還從應(yīng)用程序的路徑加載控制器代碼 (hello.js)。
另請注意，<p> 標(biāo)簽包括class屬性。
<p class="greeting-id">The ID is </p>
<p class="greeting-content">The content is </p>復(fù)制
這些class屬性幫助 jQuery 引用 HTML 元素并使用從 REST 服務(wù)接收到的 JSON的值id和屬性更新文本。content。
運(yùn)行客戶端
要運(yùn)行客戶端，您需要將它從 Web 服務(wù)器提供到瀏覽器。Spring Boot CLI(命令行界面)包括一個(gè)嵌入式 Tomcat 服務(wù)器，它提供了一種簡單的方法來提供 Web 內(nèi)容。有關(guān)安裝和使用 CLI 的更多信息，請參閱使用 Spring Boot 構(gòu)建應(yīng)用程序。
為了從 Spring Boot 的嵌入式 Tomcat 服務(wù)器提供靜態(tài)內(nèi)容，您還需要?jiǎng)?chuàng)建最少量的 Web 應(yīng)用程序代碼，以便 Spring Boot 知道啟動(dòng) Tomcat。以下app.groovy腳本足以讓 Spring Boot 知道您要運(yùn)行 Tomcat：
app.groovy：
@Controller class JsApp { }復(fù)制
您現(xiàn)在可以使用 Spring Boot CLI 運(yùn)行該應(yīng)用程序：
春季運(yùn)行 app.groovy應(yīng)用程序啟動(dòng)后，在瀏覽器中打開http://localhost:8080 ，您會(huì)在其中看到：
每次刷新頁面時(shí)，ID 值都會(huì)增加。
概括
恭喜!您剛剛開發(fā)了一個(gè)使用基于 Spring 的 RESTful Web 服務(wù)的 jQuery 客戶端。
