Spring國(guó)際認(rèn)證指南｜使用JQuery 使用 RESTful Web 服務(wù)
你將建造什么
您將構(gòu)建一個(gè)使用基于 Spring 的 RESTful Web 服務(wù)的 jQuery 客戶端。具體來(lái)說(shuō)，客戶端將使用在使用 CORS 構(gòu)建 RESTful Web 服務(wù)中創(chuàng)建的服務(wù)。
將通過(guò)index.html在瀏覽器中打開(kāi)文件來(lái)訪問(wèn) jQuery 客戶端，并將在以下位置使用接受請(qǐng)求的服務(wù)：
http://rest-service.guides.spring.io/greeting。
該服務(wù)將以JSON表示的問(wèn)候進(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è)簡(jiǎn)單的 JavaScript 函數(shù)。它使用 jQuery 的方法來(lái)使用
http://rest-service.guides.spring.io/greeting$.ajax()上的 REST 服務(wù)。如果成功，它會(huì)將接收到的 JSON 分配給，從而有效地使其成為模型對(duì)象。和然后分別附加到和DOM 元素。
dataGreetingidcontentgreeting-idgreeting-content。
注意 jQuery 承諾的使用.then()。這指示 jQuery 在方法完成時(shí)執(zhí)行匿名函數(shù)，并從完成的 AJAX 請(qǐng)求中$.ajax()傳遞結(jié)果。data
創(chuàng)建應(yīng)用程序頁(yè)面
現(xiàn)在您有了一個(gè) jQuery 控制器，您將創(chuàng)建 HTML 頁(yè)面，將客戶端加載到用戶的 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ù)制
請(qǐng)注意該部分中的以下兩個(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 庫(kù) (jquery.min.js)，這樣您就不必下載 jQuery 并將其放置在您的項(xiàng)目中。它還從應(yīng)用程序的路徑加載控制器代碼 (hello.js)。
另請(qǐng)注意，<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ù)器，它提供了一種簡(jiǎn)單的方法來(lái)提供 Web 內(nèi)容。有關(guān)安裝和使用 CLI 的更多信息，請(qǐng)參閱使用 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)后，在瀏覽器中打開(kāi)http://localhost:8080 ，您會(huì)在其中看到：
每次刷新頁(yè)面時(shí)，ID 值都會(huì)增加。
概括
恭喜!您剛剛開(kāi)發(fā)了一個(gè)使用基于 Spring 的 RESTful Web 服務(wù)的 jQuery 客戶端。
