前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Spring Boot使用RESTful Web服务

Spring Boot使用RESTful Web服务

作者头像
黑洞代码
发布2021-09-03 15:08:23
1.4K0
发布2021-09-03 15:08:23
举报
文章被收录于专栏:落叶飞翔的蜗牛

本章将详细讨论和学习如何使用jQuery AJAX来调用RESTful Web服务。

创建一个简单的Spring Boot Web应用程序并编写一个控制器类文件,用于重定向到HTML文件以使用RESTful Web服务。需要在构建配置文件中添加Spring Boot启动程序Thymeleaf和Web依赖项。

对于Maven用户,请在pom.xml 文件中添加以下依赖项。

代码语言:javascript
复制
<dependency>
   <groupId>org.springframework.boot</groupId>
   <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

<dependency>
   <groupId>org.springframework.boot</groupId>
   <artifactId>spring-boot-starter-web</artifactId>

@Controller类文件的代码如下.定义请求URI方法以重定向到HTML文件,如下所示 .

代码语言:javascript
复制
@Controller
public class ViewController {
    @RequestMapping("/view-products")
    public String viewProducts() {
       return “view-products”;
    }
    @RequestMapping("/add-products")
    public String addProducts() {
       return "add-products";
    }
}

此API http:// localhost:9090 / products响应返回以下JSON,如下所示 -

代码语言:javascript
复制
[
   {
      "id": "1",
      "name": "Honey"
   },
   {
      "id": "2",
      "name": "Almond"
   }
]

现在,在类路径的templates目录下创建一个view-products.html 文件。在HTML文件中,添加jQuery库并编写了代码以在页面加载时使用RESTful Web服务。

代码语言:javascript
复制
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script>
$(document).ready(function(){
   $.getJSON("http://localhost:9090/products", function(result){
      $.each(result, function(key,value) {
         $("#productsJson").append(value.id+" "+value.name+" ");
      }); 
   });
});
</script>

POST方法和此URL => http:// localhost:9090 / products应包含以下请求正文和响应正文。

请求正文的代码如下 -

代码语言:javascript
复制
{
   "id":"3",
   "name":"Ginger"
}

响应正文的代码如下 -

代码语言:javascript
复制
Product is created successfully

现在,在类路径的templates 目录下创建add-products.html 文件。在HTML文件中,添加jQuery库,并在单击按钮时编写了将表单提交到RESTful Web服务的代码。

代码语言:javascript
复制
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
   $(document).ready(function() {
      $("button").click(function() {
         var productmodel = {
            id : "3",
            name : "Ginger"
         };
         var requestJSON = JSON.stringify(productmodel);
         $.ajax({
            type : "POST",
            url : "http://localhost:9090/products",
            headers : {
               "Content-Type" : "application/json"
            },
            data : requestJSON,
            success : function(data) {
               alert(data);
            },
            error : function(data) {
            }
         });
      });
   });
</script>

在Web浏览器中访问URL => http://localhost:8080/view-products ,可以看到如下所示的输出 -

访问URL => http://localhost:8080/add-products ,可以看到如下所示的输出 -

现在,单击按钮提交表单,可以看到显示的结果 -

现在,点击查看产品URL => http://localhost:8080/view-products ,查看创建的产品。

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2021-08-13,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 落叶飞翔的蜗牛 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档