小吕同学真的不会敲代码 2023-02-15 18:44 采纳率: 57.1%
浏览 67
已结题

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

img

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

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

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

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

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

  • 写回答

5条回答 默认 最新

  • Monster-XH 2023-02-15 18:55
    关注

    可以使用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样式来设置这些元素的布局和外观。

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
  • 亘木子 2023-02-15 18:58
    关注

    在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相关的依赖和命名空间。

    评论
  • GISer Liu 2023-02-15 19:18
    关注

    在 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 元素的样式,以便满足您的项目需求。

    评论 编辑记录
  • qq_46161207 2023-02-15 20:05
    关注

    如果你想将 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 页面。

    评论
  • 嗝屁小孩纸 2023-02-15 18:58
    关注

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

    
    List value = user.getList();
    request.setAttribute("list",value);
    request.getRequestDispstcher("路径").forward(request,response);
    
    
    评论
查看更多回答(4条)

报告相同问题?

问题事件

  • 系统已结题 2月23日
  • 已采纳回答 2月15日
  • 修改了问题 2月15日
  • 赞助了问题酬金15元 2月15日
  • 展开全部

悬赏问题

  • ¥15 vue+element 生成table
  • ¥15 实验 4 FIFO 算法和 LRU 算法-C 程序实现
  • ¥30 电脑画面同步投屏,通过同wifi的方式投屏方法,接收投屏端不需要安装第三方软件,
  • ¥15 有偿拼接大疆精灵4RGB影像
  • ¥15 MATLAB特殊符号
  • ¥15 Arduino实现音频混响
  • ¥15 cuda.jit加速报错
  • ¥15 Octave 安装工具箱出错 Only Win32 target is supported!
  • ¥15 docker save的不能在另一台设备运行
  • ¥15 Unity Animation Rigging使用问题