使用 jQuery 使用 RESTful Web 服务

时间：2022-12-22 16:11:51

使用 jQuery 使用 RESTful Web 服务

本指南将引导您编写一个简单的jQuery客户端，该客户端使用基于Spring MVC的RESTful Web 服务.

您将构建什么

您将构建一个jQuery客户端，该客户端使用基于Spring的RESTful Web服务。具体来说，客户端将使用在 中创建的服务使用 CORS 构建 RESTful Web 服务.

jQuery 客户端将通过在浏览器中打开文件来访问，并将在以下位置使用接受请求的服务：​​index.html​​

http://rest-service.guides.spring.io/greeting

该服务将以杰伦问候语的表示形式：

{"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()​​http://rest-service.guides.spring.io/greeting.如果成功，它将把收到的 JSON 分配给 ，有效地使其成为模型对象。然后将 和 分别附加到 和 DOM 元素。​​data​​​​Greeting​​​​id​​​​content​​​​greeting-id​​​​greeting-content​​

注意使用 jQuery 承诺 。这将指示 jQuery 在方法完成时执行匿名函数，从已完成的 AJAX 请求传递结果。​​.then()​​​​$.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>

这些属性帮助 jQuery 引用 HTML 元素，并使用从 REST 服务接收的 JSON 的 和 属性中的值更新文本。​​class​​​​id​​​​content​​

运行客户端

要运行客户端，您需要将其从 Web 服务器提供给浏览器。Spring Boot CLI（命令行界面）包括一个嵌入式 Tomcat 服务器，它提供了一种提供 Web 内容的简单方法。看使用 Spring 引导构建应用程序，了解有关安装和使用 CLI 的更多信息。

为了从Spring Boot的嵌入式Tomcat服务器提供静态内容，您还需要创建最少量的Web应用程序代码，以便Spring Boot知道启动Tomcat。以下脚本足以让 Spring Boot 知道您要运行 Tomcat：​​app.groovy​​

​​app.groovy​​

@Controller class JsApp { }

现在，您可以使用 Spring Boot CLI 运行该应用程序：

spring run app.groovy

应用启动后，打开​​http://localhost:8080​​在浏览器中，您会看到：

使用 jQuery 使用 RESTful Web 服务

每次刷新页面时，ID 值都会递增。

总结

祝贺！你刚刚开发了一个jQuery客户端，它使用基于Spring的RESTful Web服务。

标签：

相关文章