AJAX前后端数据交互 SpringBoot框架

作者：System 时间：2024年08月16日分类：所有,ajax 字数：1434

在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回调函数接收这些数据。

AJAX前后端数据交互 SpringBoot框架

评论已关闭

推荐阅读