杰瑞科技汇

Java表单提交如何正确使用from标签?

我会从最基础的 Servlet 讲起,然后过渡到现在主流的 Spring Boot 框架,因为它极大地简化了开发流程。

Java表单提交如何正确使用from标签?-图1
(图片来源网络,侵删)

核心概念

无论使用什么框架,处理表单提交的核心思想都是一样的:

  1. 前端 (浏览器): 用户填写 HTML 表单,点击“提交”按钮。
  2. HTTP 请求: 浏览器将表单数据打包成一个 HTTP POST 请求(或 GET 请求),发送到服务器的指定 URL。
  3. 后端 (Java):
    • 服务器接收到这个请求。
    • 一个专门的程序(如 Servlet 或 Controller)被唤醒来处理这个请求。
    • 程序从请求中解析出表单数据。
    • 进行业务逻辑处理(如数据验证、保存到数据库等)。
    • 向浏览器返回一个响应(通常是跳转到新页面或返回 JSON 数据)。

使用原生 Java Servlet (基础,适合理解原理)

这是最传统、最基础的方式,能帮助你理解底层的工作原理。

步骤 1: 创建 HTML 表单 (form.html)

这个表单有两个输入字段:usernamepassword,以及一个提交按钮。action 属性指向处理请求的 Servlet URL,method 属性指定为 post

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">登录表单</title>
</head>
<body>
    <h1>用户登录</h1>
    <!-- 
      action="/login" 指定表单提交到的服务器路径
      method="post" 指定使用 POST 方法提交数据
    -->
    <form action="/login" method="post">
        <div>
            <label for="username">用户名:</label>
            <input type="text" id="username" name="username" required>
        </div>
        <br>
        <div>
            <label for="password">密码:</label>
            <input type="password" id="password" name="password" required>
        </div>
        <br>
        <button type="submit">登录</button>
    </form>
</body>
</html>

关键点:

Java表单提交如何正确使用from标签?-图2
(图片来源网络,侵删)
  • name 属性 (name="username") 非常重要!后端程序通过这个 name 来获取对应的值。
  • action 是一个相对路径,它会被映射到你的 Servlet。

步骤 2: 创建处理请求的 Servlet (LoginServlet.java)

这个 Java 类会接收并处理来自 /login 路径的 POST 请求。

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 java.io.IOException;
// @WebServlet 注解将这个类映射到 "/login" 路径
// 这样就不需要在 web.xml 中配置了
@WebServlet("/login")
public class LoginServlet extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        // 1. 设置请求和响应的字符编码,防止中文乱码
        request.setCharacterEncoding("UTF-8");
        response.setContentType("text/html;charset=UTF-8");
        // 2. 通过 request.getParameter() 方法获取表单数据
        // 参数 "username" 和 "password" 必须与 HTML 表单中 input 的 name 属性完全一致
        String username = request.getParameter("username");
        String password = request.getParameter("password");
        // 3. 进行业务逻辑处理(这里只是简单打印)
        System.out.println("收到的用户名: " + username);
        System.out.println("收到的密码: " + password);
        // 4. 简单的验证逻辑
        if ("admin".equals(username) && "123456".equals(password)) {
            // 登录成功,重定向到欢迎页面
            response.sendRedirect("welcome.html");
        } else {
            // 登录失败,返回错误信息
            response.getWriter().println("<h1>登录失败!用户名或密码错误。</h1>");
        }
    }
}

关键点:

  • extends HttpServlet: 表示这是一个 Servlet。
  • @WebServlet("/login"): 这是一个现代的注解方式,告诉 Tomcat(或其他 Servlet 容器),所有发往 /login 的请求都由这个 LoginServlet 来处理。
  • doPost(): 因为表单的 methodpost,所以这里重写 doPost() 方法,如果是 get,则重写 doGet()
  • request.getParameter("name"): 这是获取表单数据的核心方法。name 参数要与 HTML 中 inputname 属性匹配。
  • 中文乱码处理: 在处理 POST 请求时,必须在获取参数之前调用 request.setCharacterEncoding("UTF-8"),对于响应,设置 response.setContentType("text/html;charset=UTF-8")

步骤 3: 配置和运行

  1. form.html 放在 Web 应用的 webapp 目录下。
  2. 将编译后的 LoginServlet.class 放在 WEB-INF/classes 目录下。
  3. 将项目部署到 Tomcat 这样的 Web 容器中并启动。
  4. 在浏览器中访问 http://localhost:8080/your_project_name/form.html,填写表单并提交。

使用 Spring Boot (现代、主流、推荐)

在实际项目中,我们几乎不会直接使用原生 Servlet,而是使用像 Spring Boot 这样的框架,它能让我们用更少的代码、更优雅的方式完成同样的工作。

步骤 1: 创建 Spring Boot 项目

使用 Spring Initializr 创建一个新项目,选择以下依赖:

Java表单提交如何正确使用from标签?-图3
(图片来源网络,侵删)
  • Spring Web: 提供了构建 Web 应用所需的一切。

步骤 2: 创建 HTML 表单 (templates/form.html)

src/main/resources/templates 目录下创建 form.html,Spring Boot 推荐使用 Thymeleaf 模板引擎,所以需要额外添加 Thymeleaf 依赖。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">登录表单 - Spring Boot</title>
</head>
<body>
    <h1>用户登录</h1>
    <!-- 
      th:action="@{/login}" 是 Thymeleaf 语法,它会自动加上项目名上下文路径
      method="post" 指定使用 POST 方法提交数据
    -->
    <form th:action="@{/login}" method="post">
        <div>
            <label for="username">用户名:</label>
            <input type="text" id="username" name="username" required>
        </div>
        <br>
        <div>
            <label for="password">密码:</label>
            <input type="password" id="password" name="password" required>
        </div>
        <br>
        <button type="submit">登录</button>
    </form>
</body>
</html>

步骤 3: 创建 Controller (LoginController.java)

Controller 是 Spring MVC 的核心组件,它负责处理 HTTP 请求并返回响应。

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
@Controller
public class LoginController {
    // @GetMapping 用于处理 GET 请求
    // 当用户访问 "/login" 页面时,显示这个表单
    @GetMapping("/login")
    public String showLoginForm() {
        return "form"; // 返回 "form.html" 页面的名称(去掉后缀)
    }
    // @PostMapping 用于处理 POST 请求
    // 当用户提交表单到 "/login" 时,这个方法会被调用
    @PostMapping("/login")
    public String handleLogin(String username, String password, Model model) {
        // 1. Spring Boot 会自动将表单中 name="username" 和 name="password" 的数据
        //    绑定到方法的 username 和 password 参数中,这叫“数据绑定”。
        // 2. 进行业务逻辑处理
        System.out.println("收到的用户名: " + username);
        System.out.println("收到的密码: " + password);
        // 3. 简单的验证逻辑
        if ("admin".equals(username) && "123456".equals(password)) {
            // 登录成功,重定向到欢迎页面
            // 使用 "redirect:/" 前缀表示重定向
            return "redirect:/welcome";
        } else {
            // 登录失败,将错误信息添加到 Model 中,并返回表单页面
            model.addAttribute("error", "用户名或密码错误!");
            // 使用 "forward:/"
分享:
扫描分享到社交APP
上一篇
下一篇