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 开发，但核心交互逻辑与本文一致。

相关推荐
一叶龙洲4 小时前
wslg打开Ubuntu24.04默认打开图形界面
linux·服务器·数据库·ubuntu
圣光SG4 小时前
Servlet学习笔记
笔记·学习·servlet
敖行客 Allthinker6 小时前
Parallels Ubuntu虚拟机项目如何让手机访问？完整解决方案
linux·运维·ubuntu
keyipatience7 小时前
线程栈与TLS和线程互斥
java·linux·服务器·开发语言·ubuntu
元Y亨H7 小时前
生产环境监控与故障应急处理（5-5-5 标准）指南
运维
踏月的造梦星球7 小时前
达梦数据库执行计划与性能分析入门：EXPLAIN、AUTOTRACE 与 ET
服务器·数据库·oracle
观山岳五楼8 小时前
Ubuntu 24 怎么使用Ubuntu 20 的镜像源
linux·运维·ubuntu
星夜夏空998 小时前
网络编程（1）
服务器·网络
川石课堂软件测试8 小时前
安全测试|常见SQL注入攻击方式、实例及预防
服务器·数据库·sql·功能测试·测试工具·安全·单元测试
寒晓星9 小时前
[linux]线程及多线程
linux·运维
热门推荐
01GitHub 镜像站点022026年7月AI圈大地震：GPT-5.6被政府限制、Claude入驻Slack、Anthropic自研芯片03如何新建文件夹？ 电脑新建文件夹的4种方法04幻兽帕鲁 - 服务器管理员权限与 GM 命令完全指南05AI科技热点日报 | 2026年07月01日06国内可直接用、免费额度/永久免费的大模型API清单（含 SiliconFlow、火山、阿里、智谱、百度、Kimi、DeepSeek、DMXAPI 等）07AI 编程 IDE 全景解析 2026：Agent 全面接管开发链路08【AI前线观察】2026年国产开源大模型全面横评：从 DeepSeek V4 到 Kimi K3，谁才是开发者的最优选择？092026 年 AI 大模型 & AI 编程工具实战全总结102026 国产 AI 大模型横评：DeepSeek、通义千问、Kimi、文心一言、星火、豆包谁更能打？