This guide walks you through writing a simple jQuery client that consumes a Spring MVC-based RESTful web service.
What you will build
You will build a jQuery client that consumes a Spring-based RESTful web service. Specifically, the client will consume the service created in Building a RESTful Web Service with CORS.
The jQuery client will be accessed by opening the index.html file in your browser, and will consume the service accepting requests at:
http://rest-service.guides.spring.io/greeting
The service will respond with a JSON representation of a greeting:
{“id”:1,“content”:“Hello, World!”}
The jQuery client will render the ID and content into the DOM.
What you will need
About 15 minutes
A favorite text editor
A modern web browser
An internet connection
Create a jQuery Controller
First, you will create the jQuery controller module that will consume the REST service:
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);
});
});
This controller module is represented as a simple JavaScript function. It uses jQuery’s $.ajax() method to consume the REST service at http://rest-service.guides.spring.io/greeting. If successful, it will assign the JSON received to data, effectively making it a Greeting model object. The id and content are then appended to the greeting-id and greeting-content DOM elements respectively.
Note the use of the jQuery promise .then(). This directs jQuery to execute the anonymous function when the $.ajax() method completes, passing the data result from the completed AJAX request.
Create the Application Page
Now that you have a jQuery controller, you will create the HTML page that will load the client into the user’s web browser:
public/index.html
<body>
<div>
<p class="greeting-id">The ID is </p>
<p class="greeting-content">The content is </p>
</div>
</body>
Note the following two script tags within the section.
The first script tag loads the minified jQuery library (jquery.min.js) from a content delivery network (CDN) so that you don’t have to download jQuery and place it in your project. It also loads the controller code (hello.js) from the application’s path.
Also note that the
tags include class attributes.
The ID is
The content is
These class attributes help jQuery to reference the HTML elements and update the text with the values from the id and content properties of the JSON received from the REST service.
Run the client
To run the client, you’ll need to serve it from a web server to your browser. The Spring Boot CLI (Command Line Interface) includes an embedded Tomcat server, which offers a simple approach to serving web content. See Building an Application with Spring Boot for more information about installing and using the CLI.
In order to serve static content from Spring Boot’s embedded Tomcat server, you’ll also need to create a minimal amount of web application code so that Spring Boot knows to start Tomcat. The following app.groovy script is sufficient for letting Spring Boot know that you want to run Tomcat:
app.groovy
@Controller class JsApp { }
You can now run the app using the Spring Boot CLI:
spring run app.groovy
Once the app starts, open http://localhost:8080 in your browser, where you see:
Model data retrieved from the REST service is rendered into the DOM.
The ID value will increment each time you refresh the page.
Summary
Congratulations! You’ve just developed a jQuery client that consumes a Spring-based RESTful web service.
translate：
翻译：
本指南指导您编写一个简单的jQuery客户端，该客户端使用基于Spring MVC的RESTful web服务。
你将建造什么
您将构建使用基于Spring的RESTful web服务的jQuery客户机。具体来说，客户机将使用在使用CORS构建RESTful Web服务时创建的服务。
jQuery客户机将通过在浏览器中打开index.html文件来访问，并将在以下位置使用接受请求的服务：
http://rest-service.guides.spring.io/问候语
服务将用一个表示问候语的JSON响应：
{“id”：1，“content”：“你好，世界！”}
jQuery客户端将把ID和内容呈现到DOM中。
你需要什么
大约15分钟
最喜欢的文本编辑器
现代网络浏览器
因特网连接
创建jQuery控制器
