JS获取到JSP中的c:foreach循环的数值

2024-12-19 07:58:02 JS 1524

在JavaServer Pages (JSP)中，<c:forEach>标签通常用于迭代一个集合。在前端，JavaScript可以通过DOM操作从页面上获取这些迭代的值。以下是一个详细的示例说明如何实现这一目标：

示例场景

假设我们有一个JSP页面，其中使用了<c:forEach>标签来遍历一个列表，并生成多个<div>元素，每个<div>包含一个列表项的值。

jsp
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head>
    <title>JSP and JavaScript Example</title>
</head>
<body>
    <c:forEach var="item" items="${itemList}">
        <div class="item">${item}</div>
    </c:forEach>
    <script type="text/javascript">
        // JavaScript code will be added here
    </script>
</body>
</html>

在这个示例中，itemList是一个预定义的Java集合，例如一个List或一个ArrayList，其中包含我们要迭代的项目。

JavaScript获取迭代值

为了在JavaScript中获取这些迭代的值，我们可以使用document.querySelectorAll来选择所有包含项目值的<div>元素，并将它们的内容存储在一个数组中。

以下是一个完整的实现：

jsp
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head>
    <title>JSP and JavaScript Example</title>
</head>
<body>
    <c:forEach var="item" items="${itemList}">
        <div class="item">${item}</div>
    </c:forEach>
    <script type="text/javascript">
        // 选择所有类名为'item'的div元素
        var items = document.querySelectorAll('.item');
        // 创建一个数组来存储值
        var values = [];
        
        // 遍历NodeList并将每个div的文本内容添加到数组中
        items.forEach(function(item) {
            values.push(item.textContent);
        });
        
        // 输出值以验证
        console.log(values);
    </script>
</body>
</html>

详细说明

JSP代码部分：
- <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>：引入JSTL核心标签库。
- <c:forEach var="item" items="${itemList}">...</c:forEach>：遍历itemList，并为每个项目生成一个<div>元素。
JavaScript代码部分：
- document.querySelectorAll('.item')：选择所有类名为item的<div>元素。返回一个NodeList。
- values.push(item.textContent)：将每个<div>的文本内容（即JSP中迭代的值）添加到values数组中。
- console.log(values)：输出数组以验证结果。

扩展功能

假设你想进一步处理这些值，例如将它们显示在另一个部分或传递到服务器，下面是一个例子：

jsp
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head>
    <title>JSP and JavaScript Example</title>
</head>
<body>
    <c:forEach var="item" items="${itemList}">
        <div class="item">${item}</div>
    </