下面是 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技术站
微信扫一扫 
支付宝扫一扫 