Servlet 前后端交互实战（登录/注册案例）

7澄12025-12-03 8:33

一、Servlet 前后端交互核心概念

在 Java Web 中，Servlet 是处理客户端请求的核心组件，前后端交互的核心是：

  • `HttpServletRequest`（`req`）：接收前端传递的请求数据（如表单参数、URL参数）；

  • `HttpServletResponse`（`resp`）：将后端处理结果返回给前端（如文本、HTML、JSON）。

二、方式1：Form 表单提交（同步交互）

Form 表单是最基础的前后端交互方式，通过 `action` 指定后端 Servlet 地址，`method` 指定请求方式（GET/POST）。

2.1 登录功能实现（Form + Servlet）

（1）前端登录页面（login.html）

```html

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录页面</title>
</head>
<body>
<!-- action：后端Servlet地址；method：请求方式 -->
<form action="/sev0910/login" method="post">
    <label>用户名：</label>
    <input type="text" name="username" placeholder="请输入用户名">
    <br>
    <label>密码：</label>
    <input type="password" name="password" placeholder="请输入密码">
    <br>
    <input type="submit" value="登录">
</form>
</body>
</html>

```

（2）后端 LoginServlet 处理请求

```java

java 复制代码 
package com.qcby.servlet;

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：映射Servlet的访问路径（与Form的action对应）
@WebServlet("/login")
public class LoginServlet extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        // 1. 通过req获取前端传递的参数（name属性对应）
        String username = req.getParameter("username");
        String password = req.getParameter("password");

        // 2. 模拟登录校验（实际项目中需查数据库）
        if ("admin".equals(username) && "123456".equals(password)) {
            // 3. 通过resp向前端返回结果
            resp.getWriter().write("success");
        } else {
            resp.getWriter().write("error");
        }
    }
}

```

2.2 注册功能实现（含多类型表单元素）

（1）前端注册页面（register.html）

```html

java 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
</head>
<body>
<form action="/sev0910/register" method="post">
    <label for="name">用户名：</label>
    <input type="text" id="name" name="username">
    <br>
    <label for="password">密码：</label>
    <input type="password" id="password" name="password">
    <br>
    <!-- 单选框：name相同表示同一组 -->
    <label>性别：</label>
    <input type="radio" id="male" name="gender" value="male" checked>
    <label for="male">男</label>
    <input type="radio" id="female" name="gender" value="female">
    <label for="female">女</label>
    <br>
    <!-- 复选框 -->
    <input type="checkbox" id="subscribe" name="subscribe" checked>
    <label for="subscribe">订阅推送</label>
    <br>
    <!-- 下拉选择框 -->
    <label for="country">国家：</label>
    <select id="country" name="country">
        <option value="CN">中国</option>
        <option value="US">美国</option>
        <option value="UK">英国</option>
    </select>
    <br>
    <input type="submit" value="提交">
</form>
</body>
</html>

```

（2）后端 RegisterServlet 处理请求

```java

java 复制代码 
package com.qcby.servlet;

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("/register")
public class RegisterServlet extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        // 获取表单所有参数（与前端name属性对应）
        String username = req.getParameter("username");
        String password = req.getParameter("password");
        String gender = req.getParameter("gender");
        String subscribe = req.getParameter("subscribe");
        String country = req.getParameter("country");

        // 打印参数（实际项目中需存入数据库）
        System.out.println("用户名：" + username);
        System.out.println("密码：" + password);
        System.out.println("性别：" + gender);
        System.out.println("订阅：" + subscribe);
        System.out.println("国家：" + country);
    }
}

```

三、方式2：AJAX 异步交互（jQuery 实现）

Form 表单提交会刷新页面，而 AJAX 可以实现异步无刷新交互，通常结合 jQuery 简化代码。

3.1 引入 jQuery

在 HTML 中引入 jQuery 库（通过 CDN 或本地文件）：

```html

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>

```

3.2 登录功能的 AJAX 实现

（1）前端登录页面（ajax-login.html）

```html

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AJAX登录页面</title>
    <!-- 引入jQuery -->
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<label>用户名：</label>
<input type="text" id="username" placeholder="请输入用户名">
<br>
<label>密码：</label>
<input type="password" id="password" placeholder="请输入密码">
<br>
<!-- 按钮绑定点击事件 -->
<input type="button" onclick="login()" value="登录">

<script>
function login() {
    // 1. 获取输入框的值（通过id选择器）
    var username = $("username").val();
    var password = $("password").val();

    // 2. AJAX异步请求
    $.ajax({
        type: "POST",       // 请求方式（与Servlet的doPost对应）
        url: "/sev0910/login",  // 后端Servlet地址
        data: {             // 传递的参数（键值对）
            "username": username,
            "psw": password
        },
        success: function(data) {  // 后端响应成功后的回调
            // 处理返回结果（如提示登录成功/失败）
            console.log("后端返回：" + data);
            if (data === "success") {
                alert("登录成功！");
            } else {
                alert("用户名或密码错误！");
            }
        }
    });
}
</script>
</body>
</html>

```

（2）后端 LoginServlet 适配 AJAX

只需调整参数名（与 AJAX 的 `data` 键对应）：

```java

java 复制代码 
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    String username = req.getParameter("username");
    String password = req.getParameter("psw"); // 对应AJAX的"psw"

    if ("admin".equals(username) && "123456".equals(password)) {
        resp.getWriter().write("success");
    } else {
        resp.getWriter().write("error");
    }
}

```

四、核心知识点总结

4.1 Form 表单交互要点

  • `action`：后端 Servlet 的访问路径（需与 `@WebServlet` 注解的路径一致）；

  • `method`：请求方式（GET/POST），对应 Servlet 的 `doGet()`/`doPost()`；

  • 表单元素的 `name` 属性：是后端 `req.getParameter()` 获取参数的唯一标识。

4.2 AJAX 交互要点

  • 异步无刷新：不刷新页面即可与后端交互，提升用户体验；

  • jQuery.ajax() 参数：

  • `type`：请求方式；

  • `url`：后端地址；

  • `data`：传递的参数（键值对）；

  • `success`：后端响应成功后的回调函数。

4.3 Servlet 核心 API

  • `req.getParameter(String name)`：获取前端传递的参数；

  • `resp.getWriter().write(String data)`：向前端返回文本数据。

五、部署与访问

  1. 将 HTML 文件放在 Web 项目的 `webapp` 目录下；

  2. 启动 Tomcat 服务器；

  3. 访问页面：

通过本文的案例，你已掌握 Java Web 中最基础的前后端交互方式。实际项目中，还可以结合 JSON 格式传递复杂数据，或使用框架（如 SpringMVC）简化 Servlet 开发，但核心交互逻辑与本文一致。

相关推荐
一叶之秋141223 分钟前
Linux基础IO
linux·运维·服务器
longerxin20204 小时前
在 Linux 上使用 SCP 将文件传输到 Windows（已开启 SSH）
linux·运维·ssh
zhaotiannuo_19986 小时前
渗透测试之docker
运维·docker·容器
王正南7 小时前
kali-linux 虚拟机连接安卓模拟器
android·linux·运维·虚拟机连接模拟器·安卓模拟器，linux虚拟机
Web极客码7 小时前
如何在Ubuntu服务器上安装和配置BIND9
服务器·数据库·ubuntu
三不原则7 小时前
故障案例：容器启动失败排查（AI运维场景）——从日志分析到根因定位
运维·人工智能·kubernetes
吳所畏惧8 小时前
Linux环境/麒麟V10SP3下离线安装Redis、修改默认密码并设置Redis开机自启动
linux·运维·服务器·redis·中间件·架构·ssh
yueguangni8 小时前
sysstat 版本 10.1.5 是 CentOS 7 的默认版本，默认情况下确实不显示 %wait 字段。需要升级到新版sysstat
linux·运维·centos
funfan05178 小时前
【运维】MySQL数据库全量备份与恢复实战指南：从入门到精通
运维·数据库·mysql
西***63478 小时前
全兼容・高安全：KVM 一站式服务器远程监控与管理指南
服务器
热门推荐
01GitHub 镜像站点02安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口（持续更新）03Linux下V2Ray安装配置指南04手把手教你通过Gemini3 pro 学生认证，白用一年，手慢无！05Labelme从安装到标注：零基础完整指南06jdk21下载、安装（Windows、Linux、macOS）07GitLab 零基础入门指南：从安装到项目管理全流程08【踩坑笔记】50系显卡适配的 PyTorch 安装09UV安装并设置国内源102025-04-03 Latex学习1——本地配置Latex + VScode环境