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 jQuery</title>
<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，多刷新了几下所以显示结果如下：
学习总结
其实本文可以看成是前后端分离的应用场景。
