springboot学习之如何使用jQuery调用 RESTful Web服务

springboot学习之如何使用jQuery调用 RESTful Web服务

  • 学习目标
  • 学习环境
  • 学习内容
    • index.html页面
    • hello.js文件
  • 学习总结

学习目标

学习使用Jquery调用一个基于Spring的RESTful web服务接口。官方文档上写的是服务接口实现需要参考“ Building a RESTful Web Service with CORS”章节,我今天先不研究使用CORS实现的服务端,还是使用之前的服务“springboot学习之构建 RESTful Web服务”并借助Nginx(解决跨域)实现。
新建一个index.html,页面引入Jquery,访问如下接口:

http://127.0.0.1:8080/gs-rest-service/greeting

服务返回一个json数据:

{"id":1,"content":"Hello, World!"}

学习环境

nginx-1.21.5
idea
maven3.6.3
jdk1.8

学习内容

index.html页面

DOCTYPE html>
<html>
    <head>
        <title>Hello jQuerytitle>
        <script src="https://cdn.bootcss.com/jquery/3.4.0/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>

hello.js文件

$(document).ready(function() {
    $.ajax({
        url: "http://127.0.0.1:8081/gs-rest-service/greeting"
    }).then(function(data) {
       $('.greeting-id').append(data.id);
       $('.greeting-content').append(data.content);
    });
});

nginx配置

upstream gs-rest-service {
    server 127.0.0.1:8080;
}
server {
    listen       8081;
    server_name  127.0.0.1;
    
    location /gs-rest-service {
        proxy_pass  http://gs-rest-service;
    }
    # index.html和hello.js文件都放在E盘csdn目录下
    location / {
        root   E:\csdn;
        index  index.html index.htm;
    }
}

测试
使用浏览器访问:http://127.0.0.1:8081/index.html,每刷新一次ID自增1,多刷新了几下所以显示结果如下:
springboot学习之如何使用jQuery调用 RESTful Web服务_第1张图片

学习总结

其实本文可以看成是前后端分离的应用场景。

你可能感兴趣的:(JAVA,前端,Spring,Boot,spring,boot,jquery)