使用前端ajax整合springboot教程

 2023-03-27 20:45:18  阅读 0

在Spring Boot项目中创建一个RESTful API来处理前端请求,并返回在前端页面中引入jQuery或其他ajax库,并编写ajax代码,以便将数据发送给Spring Boot后端在Spring Boot后端中接收和处理通过ajax传递的数据将处理后的数据返回给前端页面

下面是一个简单的示例:

  1. 创建一个Spring Boot控制器类:
@RestController @RequestMapping("/api")
 public class MyController { @GetMapping("/greeting") 
public String hello() { return "Hello, world!"; } 
@PostMapping("/echo") 
public String echo(
@RequestBody String message) { 
return message; } }
  1. 在前端页面中引入jQuery,并编写ajax代码:
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
 <script> $(document).ready(function(){
 // 发送 GET 请求到 Spring Boot 后端 $.get('/api/greeting', function(data){ console.log(data); alert(data); });
 // 发送 POST 请求到 Spring Boot 后端 
$.post('/api/echo', 
'Hello from Ajax!', function(data){ 
console.log(data); alert(data); }); }); </script>
  1. 在Spring Boot后端中接收和处理通过ajax传递的数据:
@PostMapping("/echo") 
public String echo(
@RequestBody String message) {
 System.out.println("Received message: " + message); return message; }
  1. 将处理后的数据返回给前端页面:

在上面的示例中,Spring Boot后端会将消息返回给前端页面,同时将其打印到控制台中。前端页面会弹出一个对话框显示接收到的消息.

标签:

如本站内容信息有侵犯到您的权益请联系我们删除,谢谢!!


Copyright © 2020 All Rights Reserved 京ICP5741267-1号 统计代码