HTML静态页面动态获取Java传入参数

介绍

在Web开发中，我们经常需要将后端Java程序的数据传递给前端页面进行展示。而HTML作为前端页面的标记语言，本身是静态的，无法直接获取后端传入的数据。但是，我们可以通过一些技术手段实现在HTML页面中动态获取Java传入的参数，并展示在页面上。

本文将介绍两种常见的实现方法：一种是通过JSP（JavaServer Pages）技术实现，另一种是通过Ajax请求后端接口获取数据并在页面上展示。下面将分别介绍这两种方法的具体实现。

JSP实现

JSP是一种在HTML页面中嵌入Java代码的技术，通过JSP可以在页面上动态地获取Java传入的参数并进行处理。下面是一个简单的示例：

<!DOCTYPE html>
<html>
<head>
    <title>JSP示例</title>
</head>
<body>
    Hello, <%= request.getParameter("name") %>!
</body>
</html>

在上述示例中，通过request.getParameter("name")可以获取到传入的参数，并将其动态地展示在页面上。

在Java后端代码中，我们可以使用request.setAttribute("name", "John")方法将参数传递给JSP页面。下面是一个简单的例子：

@WebServlet("/hello")
public class HelloServlet extends HttpServlet {
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setAttribute("name", "John");
        request.getRequestDispatcher("/hello.jsp").forward(request, response);
    }
}

在上述例子中，我们将参数"name"的值设置为"John"，然后将请求转发到"/hello.jsp"页面。

Ajax请求实现

除了使用JSP技术，我们还可以通过Ajax请求后端接口获取数据，并在页面上展示。下面是一个示例：

<!DOCTYPE html>
<html>
<head>
    <title>Ajax示例</title>
    <script src="
    <script>
        $(document).ready(function(){
            $.ajax({
                url: "/hello",
                type: "GET",
                success: function(data){
                    $("#name").text(data.name);
                }
            });
        });
    </script>
</head>
<body>
    Hello, <span id="name"></span>!
</body>
</html>

在上述示例中，我们使用了jQuery库来发送Ajax请求。通过调用$.ajax方法，我们可以向后端的"/hello"接口发送GET请求，并在请求成功后将返回的数据展示在页面上。

在Java后端代码中，我们需要编写一个处理"/hello"请求的接口，并返回数据。下面是一个简单的例子：

@WebServlet("/hello")
public class HelloServlet extends HttpServlet {
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.setContentType("application/json");
        response.setCharacterEncoding("UTF-8");
        
        PrintWriter out = response.getWriter();
        out.print("{\"name\": \"John\"}");
        out.flush();
    }
}

在上述例子中，我们设置了响应的Content-Type为"application/json"，然后通过PrintWriter将数据写入响应体中。

流程图

下面是通过mermaid语法绘制的流程图，展示了上述两种方法的实现流程：

flowchart TD
    A[客户端] --> B[JSP页面]
    B --> C[通过JSP获取参数并展示]
    A --> D[Ajax请求]
    D --> E[后端接口]
    E --> F[处理请求并返回数据]
    F --> G[客户端展示数据]

总结

本文介绍了两种常见的方法来实现在HTML静态页面中动态获取Java传入的参数。通过使用JSP技术或者通过Ajax请求后端接口，我们可以在页面上展示后端传入的数据。两种方法各有优缺点，具体使用时可以根据项目需求进行选择。希望本文对你理解和应用这两种方法有所帮助。