springboot+jq
时间: 2025-01-03 18:38:16 浏览: 9
### 使用 jQuery 进行 Spring Boot 前后端交互
在构建基于 Spring Boot 的 Web 应用程序时,可以采用 jQuery 来简化客户端与服务器之间的数据交换过程。下面介绍一种典型的方式,在不引入额外框架的情况下实现前后端通信。
#### 创建控制器类并配置响应体返回模式
为了使控制器能够直接向视图层传递 JSON 数据而非跳转页面路径,需给目标方法加上 `@ResponseBody` 注解。这使得该函数可以直接输出字符串形式的结果至 HTTP 响应体内[^1]:
```java
package com.example.demo;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
@Controller
@RequestMapping("/api")
public class MyController {
@RequestMapping(value="/getInfo", produces="application/json;charset=UTF-8")
@ResponseBody
public String getInfo(){
// 返回JSON格式的数据供前端解析展示
return "{\"name\":\"张三\",\"age\":20}";
}
}
```
上述代码片段展示了如何定义一个简单的 RESTful API 接口 `/api/getInfo` ,它会返回一段包含姓名和年龄信息的 JSON 字符串。
#### 客户端通过 jQuery 发送 AJAX 请求获取服务端数据
对于前端部分,则可借助于 jQuery 提供的强大功能来发起异步请求并与后台互动。这里给出了一段 HTML 文件中的 JavaScript 代码示例,用于调用之前创建的服务接口并将结果显示出来[^2]:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div id="result"></div>
<script type="text/javascript">
$(document).ready(function () {
$.ajax({
url : 'http://localhost:8080/api/getInfo',
method:'GET',
success:function(data){
$('#result').append('Name:'+data.name+', Age:'+data.age);
},
error:function(xhr,status,errorThrown){
console.log(errorThrown);
}
});
});
</script>
</body>
</html>
```
这段脚本会在网页加载完成后自动执行一次 GET 请求访问指定 URL 地址,并把接收到的信息填充到页面上的特定区域中去。
阅读全文