java 返回前端list

原创

mob64ca12e95b2b 2024-03-09 04:53:55 ©著作权

文章标签 数据前端页面 Java 文章分类 Java 后端开发

©著作权归作者所有：来自51CTO博客作者mob64ca12e95b2b的原创作品，请联系作者获取转载授权，否则将追究法律责任

从Java返回前端list

在Web开发中，常常需要从后端Java代码返回数据给前端页面进行展示。其中，返回一个list类型的数据是非常常见的操作。本文将介绍如何从Java后端返回一个list给前端页面，并给出相应的代码示例。

准备工作

在开始之前，我们需要确保已经搭建好了一个Java后端项目，并且能够通过接口的形式返回数据给前端页面。如果还没有搭建好，可以参考以下步骤：

创建一个Spring Boot项目
编写Controller类，定义接口用于返回数据
在接口方法中，生成一个list并返回

返回list给前端

在Controller类中，我们可以定义一个接口方法，用于返回list类型的数据给前端。以下是一个简单的示例代码：

@RestController
public class DataController {

    @GetMapping("/getListOfData")
    public List<String> getListOfData() {
        List<String> data = new ArrayList<>();
        data.add("Data 1");
        data.add("Data 2");
        data.add("Data 3");
        return data;
    }
}

在上面的代码中，我们定义了一个DataController类，并在其中编写了一个getListOfData方法。该方法返回一个包含三个字符串数据的list。

前端页面获取数据

在前端页面中，我们可以通过发送一个HTTP请求到后端接口，获取到返回的list数据。以下是一个简单的页面示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>Display Data</title>
</head>
<body>
    <ul id="dataList"></ul>

    <script>
        fetch('/getListOfData')
            .then(response => response.json())
            .then(data => {
                const dataList = document.getElementById('dataList');
                data.forEach(item => {
                    const li = document.createElement('li');
                    li.textContent = item;
                    dataList.appendChild(li);
                });
            });
    </script>
</body>
</html>

在上面的代码中，我们使用了fetch API发送了一个GET请求到/getListOfData接口，并在获取到数据后将数据展示在页面上。