springboot整合jquery实现前后端数据交互
warning:
这篇文章距离上次修改已过203天，其中的内容可能已经有所变动。
在Spring Boot中整合jQuery实现前后端数据交互，你需要做的是：
- 创建一个Spring Boot项目，并添加一个REST接口。
- 创建一个HTML页面，使用jQuery来发送AJAX请求并处理响应。
以下是一个简单的例子：
后端代码（Spring Boot Controller）:
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
@RestController
public class DataController {
@GetMapping("/data")
public String getData() {
return "Hello from Spring Boot";
}
}前端代码（HTML + jQuery）:
<!DOCTYPE html>
<html>
<head>
<title>jQuery Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$("#fetchData").click(function() {
$.get("/data", function(response) {
$("#dataContainer").text(response);
});
});
});
</script>
</head>
<body>
<button id="fetchData">Fetch Data</button>
<div id="dataContainer"></div>
</body>
</html>在这个例子中，当用户点击按钮时，jQuery会发送一个GET请求到/data端点，Spring Boot后端接收请求并返回数据。然后jQuery处理这个响应，并将数据显示在页面上的<div>容器中。
确保你的Spring Boot应用运行在一个端口上，并且在浏览器中打开这个HTML页面，测试这个交互。
评论已关闭