Thymeleaf网页中JS获取后台Model传递的数组列表

"在 Thymeleaf 网页中，JS 获取 Model 中的数组列表" 在 Thymeleaf 网页中，JS 获取后台 Model 传递过来的对象非常重要，这对减少数据库表操作代码的工作量，以及使前台开发更具灵活性具有非常重要的作用。获取 Model 传过来的简单变量很简单，但是获取它传过来的对象却不容易。本例中，我们将介绍如何在 Thymeleaf 网页中使用 JS 获取后台通过 Model 传递过来的数组列表。 在 Thymeleaf 中，我们可以使用 Model 来传递数据给视图层。在 Controller 中，我们可以使用 `@RequestMapping` 注解来映射请求，并将数据添加到 Model 中。在本例中，我们使用 `ArrayList` 来存储数组列表， 并将其添加到 Model 中。 在 Controller 中的代码如下所示： ```java @RequestMapping("/user") public String userHandler(Model model) { List<String[]> msglist = new ArrayList<String[]>(); String[] arr = new String[] {"aa", "bb", "cc"}; msglist.add(arr); arr = new String[] {"good", "hello"}; msglist.add(arr); arr = new String[] {"abc@sohu.com", "xyz@sina.com"}; msglist.add(arr); model.addAttribute("msglist", msglist); return "user"; } ``` 在上面的代码中，我们使用 `ArrayList` 来存储数组列表，并将其添加到 Model 中。在视图层中，我们可以使用 Thymeleaf 的 `th:each` 属性来遍历数组列表。 在视图层中的代码如下所示： ```html <table id="msglistTable" style="position:absolute;left:-58000px;top:0px;"> <tr th:each="items: ${msglist}"> <td th:each="item: ${items}" th:text="${item}"></td> </tr> </table> ``` 在上面的代码中，我们使用 `th:each` 属性来遍历数组列表，并使用 `th:text` 属性来显示数组元素的值。 在 JS 中，我们可以使用 `document.getElementById` 方法来获取表格元素，并使用 `for` 循环来遍历数组列表。代码如下所示： ```javascript var msglist = []; $(document).ready(init); function init() { try { var tb = document.getElementById("msglistTable"); for (var r = 0; r < tb.rows.length; r++) { var arr = []; var row = tb.rows[r]; for (var c = 0; c < row.cells.length; c++) { arr[c] = row.cells[c].innerText; } contentCfgs[r] = arr; } } catch (e) { alert("e=" + e); } } ``` 在上面的代码中，我们使用 `document.getElementById` 方法来获取表格元素，并使用 `for` 循环来遍历数组列表。我们还使用 `try-catch` 语句来捕获异常。 在 Thymeleaf 网页中获取 Model 中的数组列表可以使用 Thymeleaf 的 `th:each` 属性和 JS 的 `for` 循环来实现。通过这种方式，我们可以轻松地获取后台传递过来的数组列表，并在前台进行处理和显示。