AJAX前后端数据交互 SpringBoot框架
在Spring Boot中，我们可以使用@RestController和@GetMapping注解来创建一个简单的AJAX前后端数据交互的接口。以下是一个简单的例子：
后端代码（Spring Boot Controller）:
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.HashMap;
import java.util.Map;
@RestController
public class AjaxController {
@GetMapping("/getData")
public Map<String, Object> getData() {
Map<String, Object> data = new HashMap<>();
data.put("key1", "value1");
data.put("key2", "value2");
return data;
}
}前端代码（HTML + JavaScript）:
<!DOCTYPE html>
<html>
<head>
<title>AJAX Example</title>
<script>
function fetchData() {
var xhr = new XMLHttpRequest();
xhr.open("GET", "/getData", true);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
var json = JSON.parse(xhr.responseText);
console.log(json);
// 处理json数据
}
};
xhr.send();
}
</script>
</head>
<body>
<button onclick="fetchData()">Fetch Data</button>
</body>
</html>在这个例子中，当用户点击按钮时，会触发fetchData函数，该函数使用AJAX的XMLHttpRequest对象向/getData端点发送GET请求，然后后端的@GetMapping("/getData")注解的方法处理这个请求并返回JSON格式的数据，前端JavaScript通过xhr.onreadystatechange回调函数接收这些数据。
评论已关闭