前端怎么显示 java PrintWriter 返回html代码

原创

mob649e815e258d 2024-12-17 09:13:20 ©著作权

©著作权归作者所有：来自51CTO博客作者mob649e815e258d的原创作品，请联系作者获取转载授权，否则将追究法律责任

前端如何显示 Java PrintWriter 返回的 HTML 代码

在现代 Web 开发中，Java 后端常常用于生成动态内容。通过 PrintWriter 类，Java 可以方便地将 HTML 数据返回给前端。在这个项目中，我们将探讨如何利用 Java 的 PrintWriter 生成 HTML，并在前端显示这些数据。

项目背景

在开发一个简单的旅游网站时，我们需要在后端生成旅行详情的 HTML 内容，并通过前端展示给用户。我们将使用 Java Servlet 来实现后端，前端则通过 AJAX 进行异步请求。

技术栈

前端：HTML, CSS, JavaScript (AJAX)
后端：Java, Servlet
开发环境：Tomcat

实现步骤

1. 创建 Java Servlet

我们首先需要创建一个 Servlet，它使用 PrintWriter 返回 HTML 代码。

import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet("/travel")
public class TravelServlet extends HttpServlet {
    protected void doGet(HttpServletRequest request, HttpServletResponse response) 
            throws ServletException, IOException {
        response.setContentType("text/html;charset=UTF-8");
        PrintWriter out = response.getWriter();

        // 生成 HTML 代码
        out.println("<html>");
        out.println("<head><title>Travel Destinations</title></head>");
        out.println("<body>");
        out.println("Top Travel Destinations");
        out.println("<table border='1'>");
        out.println("<tr><th>Destination</th><th>Description</th></tr>");
        out.println("<tr><td>Paris</td><td>The city of love.</td></tr>");
        out.println("<tr><td>Tokyo</td><td>The capital of Japan.</td></tr>");
        out.println("<tr><td>New York</td><td>Famous for Statue of Liberty.</td></tr>");
        out.println("</table>");
        out.println("</body>");
        out.println("</html>");
    }
}

2. 前端用 AJAX 请求数据

为了异步加载数据，我们可以使用 JavaScript 的 XMLHttpRequest 或者更现代的 fetch API 来获取旅行目的地信息。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Travel Destinations</title>
    <script>
        function loadTravelData() {
            fetch('/your-context-path/travel')
            .then(response => response.text())
            .then(data => {
                document.getElementById('content').innerHTML = data;
            })
            .catch(error => console.error('Error:', error));
        }

        window.onload = loadTravelData;
    </script>
</head>
<body>
    Welcome to Travel World
    <div id="content">Loading...</div>
</body>
</html>

3. 整体流程图

在这个项目中，前端向后端请求数据，后端生成 HTML 代码并返回。以下是整体流程的可视化表示：

journey
    title Web Application Data Flow
    section User Interaction
      User opens web page: 5: User
      User triggers data loading: 5: User
    section AJAX Request
      Fetch travel data from server: 4: User
      Server processes request: 4: Server
      Server sends HTML response: 4: Server
    section DOM Update
      Frontend updates the DOM with travel data: 5: User