springboot和vue数据交互ajax
时间: 2023-11-14 10:07:19 浏览: 56
在 Spring Boot 中,可以使用 Spring MVC 框架来处理前端发送的 Ajax 请求并返回 JSON 格式的数据。而在 Vue.js 中,可以使用 axios 库来发送 Ajax 请求。
下面是一个简单的示例:
1. 在 Spring Boot 中编写一个控制器,用于处理 Ajax 请求并返回数据:
```java
@RestController
@RequestMapping("/api")
public class ApiController {
@GetMapping("/hello")
public Map<String, String> sayHello() {
Map<String, String> result = new HashMap<>();
result.put("message", "Hello World");
return result;
}
}
```
2. 在 Vue.js 中,使用 axios 发送 Ajax 请求并处理返回的数据:
```javascript
axios.get('/api/hello')
.then(response => {
console.log(response.data.message);
})
.catch(error => {
console.log(error);
});
```
在这个示例中,我们使用 axios 发送一个 GET 请求到 `/api/hello` 接口,并在控制台打印返回的数据。
注意,在实际开发中,可能需要对 Ajax 请求进行一些安全措施,如 CSRF 防护、跨域访问等。可以根据具体情况进行处理。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)