jsp页面怎么循环输出json数据库

谷歌浏览器谷歌浏览器谷歌浏览器下载谷歌浏览器下载谷歌浏览器谷歌浏览器谷歌浏览器下载谷歌浏览器下载

JSP页面如何循环输出JSON数据库数据

在Web开发中，JSP（JavaServer Pages）常用于动态生成页面内容，当需要从数据库查询数据并以JSON格式循环输出到JSP页面时，通常需要结合后端Java代码（如Servlet或JSP内置脚本）和前端JavaScript来实现，本文将详细介绍如何在JSP页面中循环输出JSON数据库数据，涵盖从数据库查询到前端渲染的完整流程。

后端：从数据库获取数据并转换为JSON

准备数据库数据

确保数据库中有对应的表和数据，假设有一个user表，结构如下：

CREATE TABLE `user` (
  `id` INT PRIMARY KEY AUTO_INCREMENT,
  `name` VARCHAR(50) NOT NULL,
  `age` INT,
  `email` VARCHAR(100)
);

并插入一些测试数据：

INSERT INTO `user` (name, age, email) VALUES 
('张三', 25, 'zhangsan@example.com'),
('李四', 30, 'lisi@example.com'),
('王五', 28, 'wangwu@example.com');

后端代码：查询数据库并生成JSON

在JSP中，可以通过JDBC连接数据库，查询数据后转换为JSON格式，以下是两种常见实现方式：

使用JSP脚本（Scriptlet）

在JSP页面中直接编写Java代码，适合简单场景（但不推荐，因脚本let难以维护）：

<%@ page import="java.sql.*, com.fasterxml.jackson.databind.ObjectMapper" %>
<%
    // 1. 加载驱动并连接数据库
    String url = "jdbc:mysql://localhost:3306/your_database";
    String username = "root";
    String password = "password";
    Connection conn = null;
    PreparedStatement pstmt = null;
    ResultSet rs = null;
    try {
        Class.forName("com.mysql.cj.jdbc.Driver");
        conn = DriverManager.getConnection(url, username, password);
        // 2. 查询数据
        String sql = "SELECT id, name, age, email FROM user";
        pstmt = conn.prepareStatement(sql);
        rs = pstmt.executeQuery();
        // 3. 使用Jackson库将ResultSet转换为JSON
        ObjectMapper objectMapper = new ObjectMapper();
        List<Map<String, Object>> userList = new ArrayList<>();
        while (rs.next()) {
            Map<String, Object> user = new HashMap<>();
            user.put("id", rs.getInt("id"));
            user.put("name", rs.getString("name"));
            user.put("age", rs.getInt("age"));
            user.put("email", rs.getString("email"));
            userList.add(user);
        }
        // 4. 将List转换为JSON字符串
        String jsonOutput = objectMapper.writeValueAsString(userList);
        // 5. 将JSON数据存入request作用域，供前端使用
        request.setAttribute("userData", jsonOutput);
    } catch (Exception e) {
        e.printStackTrace();
    } finally {
        // 6. 关闭资源
        if (rs != null) rs.close();
        if (pstmt != null) pstmt.close();
        if (conn != null) conn.close();
    }
%>

使用Servlet（推荐）

更规范的做法是通过Servlet处理后端逻辑，JSP仅负责展示。

Servlet代码（UserDataServlet.java）：

import java.io.IOException;
import java.sql.*;
import java.util.*;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.fasterxml.jackson.databind.ObjectMapper;
@WebServlet("/userData")
public class UserDataServlet extends HttpServlet {
    protected doGet(HttpServletRequest request, HttpServletResponse response) 
            throws ServletException, IOException {
        String url = "jdbc:mysql://localhost:3306/your_database";
        String username = "root";
        String password = "password";
        List<Map<String, Object>> userList = new ArrayList<>();
        try {
            Class.forName("com.mysql.cj.jdbc.Driver");
            Connection conn = DriverManager.getConnection(url, username, password);
            String sql = "SELECT id, name, age, email FROM user";
            PreparedStatement pstmt = conn.prepareStatement(sql);
            ResultSet rs = pstmt.executeQuery();
            ObjectMapper objectMapper = new ObjectMapper();
            while (rs.next()) {
                Map<String, Object> user = new HashMap<>();
                user.put("id", rs.getInt("id"));
                user.put("name", rs.getString("name"));
                user.put("age", rs.getInt("age"));
                user.put("email", rs.getString("email"));
                userList.add(user);
            }
            String jsonOutput = objectMapper.writeValueAsString(userList);
            request.setAttribute("userData", jsonOutput);
            rs.close();
            pstmt.close();
            conn.close();
        } catch (Exception e) {
            e.printStackTrace();
        }
        // 转发到JSP页面
        request.getRequestDispatcher("displayUserData.jsp").forward(request, response);
    }
}

前端：在JSP页面中循环输出JSON数据

获取后端传递的JSON数据

在JSP页面中，通过${userData}获取Servlet设置的JSON字符串（需在JSP顶部添加JSTL标签库支持）：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<!DOCTYPE html>
<html>
<head>用户数据展示</title>
</head>
<body>
    <h1>用户列表（JSON数据循环输出）</h1>
    <%-- 获取后端传递的JSON字符串 --%>
    <c:set var="jsonData" value="${userData}" />
    <%-- 使用JavaScript解析并循环输出 --%>
    <script>
        // 将JSP中的JSON字符串传递给JavaScript
        var userData = JSON.parse('${jsonData}');
        // 获取页面容器
        var container = document.getElementById('userContainer');
        // 循环输出数据
        userData.forEach(function(user) {
            var userDiv = document.createElement('div');
            userDiv.style.border = '1px solid #ccc';
            userDiv.style.padding = '10px';
            userDiv.style.margin = '10px 0';
            userDiv.innerHTML = `
                <p><strong>ID:</strong> ${user.id}</p>
                <p><strong>姓名:</strong> ${user.name}</p>
                <p><strong>年龄:</strong> ${user.age}</p>
                <p><strong>邮箱:</strong> ${user.email}</p>
            `;
            container.appendChild(userDiv);
        });
    </script>
    <!-- 数据输出容器 -->
    <div id="userContainer"></div>
</body>
</html>

使用JSTL循环输出（纯JSP方式）

如果不想使用JavaScript，也可以通过JSTL直接循环输出（需将JSON数据转换为List对象，方式一中的脚本let已实现）：

<%@ page import="java.util.*, com.fasterxml.jackson.databind.ObjectMapper" %>
<%
    // 方式一中的代码已将JSON存入request.setAttribute("userData", jsonOutput);
    // 此处需将JSON字符串转回List（实际开发中建议Servlet直接传递List）
%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<!DOCTYPE html>
<html>
<head>用户数据展示（JSTL循环）</title>
</head>
<body>
    <h1>用户列表（JSTL循环输出）</h1>
    <%-- 将JSON字符串转回List（仅演示，实际开发中Servlet应直接传递List） --%>
    <%
        ObjectMapper objectMapper = new ObjectMapper();
        List<Map<String, Object>> userList = objectMapper.readValue((String) request.getAttribute("userData"), List.class);
        request.setAttribute("userList", userList);
    %>
    <c:forEach var="user" items="${userList}">
        <div style="border: 1px solid #ccc; padding: 10px; margin: 10px 0;">
            <p><strong>ID:</strong> ${user.id}</p>
            <p><strong>姓名:</strong> ${user.name}</p>
            <p><strong>年龄:</strong> ${user.age}</p>
            <p><strong>邮箱:</strong> ${user.email}</p>
        </div>
    </c:forEach>
</body>
</html>

注意事项

依赖库：需添加Jackson库（用于JSON转换）和MySQL驱动（JDBC连接），如果是Maven项目，在pom.xml中添加：

<dependency>
    <groupId>com.fasterxml.jackson.core</groupId>
    <artifactId>jackson-databind</artifactId>
    <version>2.13.0</version>
</dependency>
<dependency>
    <groupId>mysql</groupId>
    <artifactId>mysql