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 文件中添加以下依赖项。

<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文件，如下所示 .

@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，如下所示 -

[
   {
      "id": "1",
      "name": "Honey"
   },
   {
      "id": "2",
      "name": "Almond"
   }
]

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

<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应包含以下请求正文和响应正文。

请求正文的代码如下 -

{
   "id":"3",
   "name":"Ginger"
}

响应正文的代码如下 -

Product is created successfully

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

<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 ，可以看到如下所示的输出 -