点击HTML按钮递增JSTL var值的实现方案咨询

你遇到的问题很典型——JSTL标签是服务器端代码，页面渲染完成后就已经执行完毕了，而onclick是客户端浏览器触发的事件，这时候服务器端的代码早就跑完了，所以直接把<c:set>写在onclick里根本不会触发服务器端的变量更新，这就是为什么你的代码没效果。

下面给你两种常用的正确实现方式，根据你的需求选就行：

方法1：用表单提交（同步刷新页面） #

这种方式适合不需要无刷新更新的场景，通过提交表单触发服务器端代码来更新变量：

1. 首先在页面里初始化变量（注意把scope设为session，这样跨请求能保留值）：

<c:set var="cardIndex" scope="session" value="${empty cardIndex ? 0 : cardIndex}" />

2. 然后写一个表单，按钮点击时提交表单，服务器端处理递增逻辑：

<form action="${pageContext.request.contextPath}/updateIndex" method="post">
    <button type="submit" name="action" value="next">Next</button>
</form>

3. 接着写一个Servlet（或者用JSP页面处理请求），比如updateIndex对应的Servlet：

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    HttpSession session = request.getSession();
    Integer cardIndex = (Integer) session.getAttribute("cardIndex");
    if (cardIndex == null) {
        cardIndex = 0;
    }
    cardIndex++;
    session.setAttribute("cardIndex", cardIndex);
    // 重定向回原来的页面，避免表单重复提交
    response.sendRedirect(request.getContextPath() + "/yourOriginalPage.jsp");
}

方法2：用AJAX异步请求（无刷新更新） #

如果不想刷新页面，就用AJAX来异步请求服务器端更新变量，同时可以更新页面上的展示：

1. 初始化变量还是一样：

<c:set var="cardIndex" scope="session" value="${empty cardIndex ? 0 : cardIndex}" />
<p>当前索引：<span id="currentIndex">${cardIndex}</span></p>

2. 写按钮和JS代码（用原生JS示例）：

<button id="next">Next</button>

<script>
    document.getElementById('next').addEventListener('click', function() {
        fetch('${pageContext.request.contextPath}/updateIndex', {
            method: 'POST'
        })
        .then(response => response.text())
        .then(newIndex => {
            // 更新页面上显示的索引值
            document.getElementById('currentIndex').textContent = newIndex;
        })
        .catch(error => console.error('更新失败:', error));
    });
</script>

3. 对应的Servlet修改一下，返回新的索引值：

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    HttpSession session = request.getSession();
    Integer cardIndex = (Integer) session.getAttribute("cardIndex");
    if (cardIndex == null) {
        cardIndex = 0;
    }
    cardIndex++;
    session.setAttribute("cardIndex", cardIndex);
    // 返回新的索引值给前端
    response.getWriter().write(String.valueOf(cardIndex));
}

额外提醒 #

如果你只是需要前端展示用的索引，不需要服务器端保存，那完全可以用JS变量来实现，不用JSTL：

<button id="next">Next</button>
<p>当前索引：<span id="currentIndex">0</span></p>

<script>
    let index = 0;
    document.getElementById('next').onclick = function() {
        index++;
        document.getElementById('currentIndex').textContent = index;
    };
</script>

这种方式更简单，适合不需要服务器端持久化的场景。

内容的提问来源于stack exchange，提问作者MadMax