java后端list集合中的数据怎么传递到前端div中显示？前端html不是js,动态增加div（非表格）

Question

如图所示，我想查看某个对象在数据库中的所有数据展示在前端，动态加载div（多少条数据加载几个div），目前查到的方法也只是前端采用

<c:forEach items="${list}" > 

结合javascript，可是c:forEach适用于.js我的项目都是.html，还有适用于表格的

<tr th:each="image:${list}">

表格的样式不符合项目需求，请问spring作为后端，html作为前端，且适用于动态增加div显示数据，有什么方法能做到？

Answer 1

可以使用JavaScript来动态创建和添加HTML元素，并将从后端获取的数据填充到这些元素中。
在你的HTML页面中，可以创建一个空的容器元素，例如：

<div id="data-container"></div>

然后，使用JavaScript获取从后端传递过来的数据，并使用循环将每个数据项添加到容器中：

<script>
  // 假设从后端获取的数据存在名为 data 的变量中
  var data = ${list};

  // 获取容器元素
  var container = document.getElementById("data-container");

  // 循环遍历数据，并为每个数据项创建一个 div 元素
  for (var i = 0; i < data.length; i++) {
    var div = document.createElement("div");

    // 向 div 元素中添加数据
    var img = document.createElement("img");
    img.src = data[i].imageUrl; // 假设数据项中包含一个名为 imageUrl 的属性，用于显示图片
    div.appendChild(img);

    // 添加其他数据到 div 元素中
    // ...

    // 将 div 元素添加到容器中
    container.appendChild(div);
  }
</script>

这将创建一个或多个包含数据的 div 元素，并将它们添加到容器中以供显示。你可以根据需要使用CSS样式来设置这些元素的布局和外观。

Answer 2

在Spring后端中，可以将list集合数据封装到Model中，然后在前端HTML中使用Thymeleaf模板引擎进行数据渲染。下面是一个简单的示例：

1. 在Spring后端Controller中，将list集合数据添加到Model中：

@GetMapping("/data")
public String showData(Model model) {
    List<MyObject> list = myService.getDataList();
    model.addAttribute("dataList", list);
    return "dataView";
}

1. 在前端HTML页面中，使用Thymeleaf模板引擎进行数据渲染：

<div th:each="data : ${dataList}">
    <p>对象属性1: <span th:text="${data.property1}"></span></p>
    <p>对象属性2: <span th:text="${data.property2}"></span></p>
    <p>对象属性3: <span th:text="${data.property3}"></span></p>
</div>

这样就可以动态加载多个div，将list集合中的数据展示在前端页面中。Thymeleaf模板引擎会将数据绑定到页面上。注意，需要在HTML页面中引入Thymeleaf相关的依赖和命名空间。

Answer 3

在 HTML 中使用 JavaScript 可以实现动态增加 div 显示数据的效果。具体来说，您可以在 HTML 页面中添加一个 div 容器，然后在 JavaScript 中动态生成多个 div 元素，并将每个 div 元素的内容设置为从后端获取的数据。

下面是一个示例代码，假设后端返回的数据是一个 List 对象，每个元素包含一个字符串和一个数字：

html

<!-- HTML 页面中的 div 容器 -->
<div id="data-container"></div>

<!-- JavaScript 代码 -->
<script>
  // 从后端获取数据
  const data = ${list}; // 这里假设 ${list} 是后端传递过来的数据

  // 获取 div 容器
  const container = document.getElementById('data-container');

  // 遍历数据，动态创建 div 元素并添加到容器中
  for (let i = 0; i < data.length; i++) {
    const item = data[i];
    const div = document.createElement('div');
    div.innerHTML = '字符串：' + item.str + '，数字：' + item.num;
    container.appendChild(div);
  }
</script>

在上面的代码中，我们首先从后端获取数据 ${list}，假设该数据是一个 List 对象。然后，我们使用 JavaScript 遍历该 List 对象，动态创建多个 div 元素，并将每个 div 元素的内容设置为从后端获取的数据。最后，我们将这些 div 元素添加到 HTML 页面中的一个 div 容器中。

注意，上述代码中的 ${list} 可能需要根据具体的后端框架和模板引擎进行修改，以便正确地从后端获取数据。另外，您可能需要根据实际情况修改 div 元素的样式，以便满足您的项目需求。

Answer 4

如果你想将 Java 后端的 List 集合中的数据传递到前端，可以使用后端框架将 List 转换为 JSON 格式的字符串，再将字符串传递给前端页面。

在前端页面中，你可以使用 JavaScript 来解析 JSON 字符串，将其中的数据渲染到 HTML 页面中。一种常见的方法是使用模板引擎，例如 Mustache、Handlebars、EJS 等，来动态生成 HTML 元素。

以下是一个简单的示例代码，演示了如何使用 Mustache.js 渲染 List 中的数据到前端页面中：

<!-- 在 HTML 中定义一个 div 元素，用于显示列表 -->
<div id="list"></div>

<!-- 引入 Mustache.js 库 -->
<script src="https://unpkg.com/mustache@4.3.0/mustache.min.js"></script>

<!-- 定义 Mustache 模板，用于渲染列表 -->
<script id="list-template" type="text/template">
  {{#items}}
    <div>{{name}} - {{age}}</div>
  {{/items}}
</script>

<!-- 在 JavaScript 中将 List 转换为 JSON 字符串，并使用 Mustache 渲染到页面中 -->
<script>
  // 从后端获取 List 数据
  const items = [
    { name: 'Alice', age: 20 },
    { name: 'Bob', age: 25 },
    { name: 'Charlie', age: 30 }
  ];

  // 将 List 转换为 JSON 字符串
  const itemsJson = JSON.stringify({ items });

  // 获取 Mustache 模板
  const template = document.getElementById('list-template').innerHTML;

  // 使用 Mustache 渲染模板
  const html = Mustache.render(template, JSON.parse(itemsJson));

  // 将渲染后的 HTML 添加到页面中
  const listElement = document.getElementById('list');
  listElement.innerHTML = html;
</script>

这段代码将在页面中生成如下的 HTML：

<div id="list">
  <div>Alice - 20</div>
  <div>Bob - 25</div>
  <div>Charlie - 30</div>
</div>

你可以根据自己的需要修改模板和数据格式，来渲染符合你需求的 HTML 页面。

Answer 5

这种获取的变量只能是请求转发，不能通过接口，最简单的就是通过HttpServletRequest request入参，使用如下代码转发携带参数

List value = user.getList();
request.setAttribute("list",value);
request.getRequestDispstcher("路径").forward(request,response);