Java Servlet生成JSON格式数据并用jQuery显示的方法

下面是 Java Servlet 生成 JSON 格式数据并用 jQuery 显示的方法的完整攻略。

什么是 JSON？

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式，易于阅读和编写。

Servlet 生成 JSON

1. 添加依赖

首先需要添加一个 JSON 库，常用的有 Gson 和 FastJSON。这里以 Gson 为例，在 pom.xml 文件中加入以下依赖：

<dependency>
  <groupId>com.google.code.gson</groupId>
  <artifactId>gson</artifactId>
  <version>2.8.6</version>
</dependency>

2. 编写 Servlet

在 Servlet 中，需要将数据转成 JSON 格式，代码如下：

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        List<Student> students = new ArrayList<>();
        students.add(new Student("001", "Alice", "Female", 22));
        students.add(new Student("002", "Bob", "Male", 23));
        students.add(new Student("003", "Tom", "Male", 21));

        Gson gson = new Gson();
        String json = gson.toJson(students);

        response.setContentType("application/json;charset=utf-8");
        PrintWriter writer = response.getWriter();
        writer.write(json);
        writer.flush();
        writer.close();
}

在上述代码中，生成了一个包含三个学生信息的 List，然后通过 Gson 将 List 转成 JSON 格式，最后将 JSON 返回给客户端。

3. 测试

启动应用程序，在浏览器中访问 Servlet，应该能看到生成的 JSON 格式数据。

jQuery 显示 JSON

1. 添加依赖

需要在页面中引入 jQuery 库，在 HTML 文件中加入以下代码：

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

2. 编写 JS 代码

编写 jQuery 代码，获取 Servlet 返回的 JSON 数据，代码如下：

$(function() {
  $.getJSON('./myServlet', function(data) {
    $.each(data, function(i, item) {
        $("#studentsTable").append(
            "<tr><td>" + item.id + "</td>" + 
            "<td>" + item.name + "</td>" + 
            "<td>" + item.gender + "</td>" + 
            "<td>" + item.age + "</td></tr>"
        );
    });
  });
});

在上述代码中，调用了 jQuery 的 getJSON 函数，获取了 Servlet 返回的 JSON 数据，然后通过 each 函数遍历每一个学生信息，并将其追加到 HTML 表格中显示。

3. 测试

在 HTML 文件中添加一个空的表格，然后启动应用程序，应该能看到从 Servlet 返回的 JSON 格式数据已经以表格形式显示在网页中。

以下是完整的示例代码：

Servlet：

@WebServlet(name = "MyServlet", urlPatterns = "/myServlet")
public class MyServlet extends HttpServlet {
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        List<Student> students = new ArrayList<>();
        students.add(new Student("001", "Alice", "Female", 22));
        students.add(new Student("002", "Bob", "Male", 23));
        students.add(new Student("003", "Tom", "Male", 21));

        Gson gson = new Gson();
        String json = gson.toJson(students);

        response.setContentType("application/json;charset=utf-8");
        PrintWriter writer = response.getWriter();
        writer.write(json);
        writer.flush();
        writer.close();
    }
}

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Servlet 显示 JSON 示例</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
    <table id="studentsTable" border="1">
        <thead>
            <tr>
                <td>ID</td>
                <td>姓名</td>
                <td>性别</td>
                <td>年龄</td>
            </tr>
        </thead>
        <tbody>

        </tbody>
    </table>
    <script>
        $(function() {
            $.getJSON('./myServlet', function(data) {
                $.each(data, function(i, item) {
                    $("#studentsTable").append(
                        "<tr><td>" + item.id + "</td>" + 
                        "<td>" + item.name + "</td>" + 
                        "<td>" + item.gender + "</td>" + 
                        "<td>" + item.age + "</td></tr>"
                    );
                });
            });
        });
    </script>
</body>
</html>

这两个文件需要放在同一个项目中，然后启动项目即可。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：Java Servlet生成JSON格式数据并用jQuery显示的方法 - Python技术站

Java Servlet生成JSON格式数据并用jQuery显示的方法

什么是 JSON？

Servlet 生成 JSON

1. 添加依赖

2. 编写 Servlet

3. 测试

jQuery 显示 JSON

1. 添加依赖

2. 编写 JS 代码

3. 测试

相关文章