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

相关推荐
方便面不加香菜3 小时前
Linux--基础IO（一）
linux·运维·服务器
鼎讯信通5 小时前
风电光缆运维提质增效：G-4000A 光缆故障追踪仪破解风场巡检难题
运维·网络·数据库
三十..5 小时前
MySQL 从入门到高可用架构实战精要
运维·数据库·mysql
跨境数据猎手6 小时前
大数据在电商行业的应用
大数据·运维·爬虫
linyanRPA7 小时前
影刀RPA店群自动化实战：多店铺活动自动报名与促销管理架构设计
运维·自动化·办公自动化·rpa·python脚本·爬虫自动化·店群自动化
mounter6257 小时前
现代 Linux 内存管理的演进与变革：从传统 LRU 到多代架构 MGLRU
linux·服务器·kernel
会Tk矩阵群控的小木7 小时前
安卓群控系统对于游戏工作室实战教程
android·运维·游戏·adb·开源软件·个人开发
佛山个人技术开发8 小时前
GitCode SSH连接配置教程
运维·ssh·gitcode
The Sheep 20238 小时前
Vue复习
linux·服务器·数据库
OpsEye9 小时前
系统负载高一定是CPU问题吗？
运维·cpu·it
热门推荐
01GitHub 镜像站点02【AI】2026 年具身智能模型和世界模型总结03Codex 下载安装指南：Windows 和 macOS 官方版下载042026 年 AI 编程工具终极横评：Cursor vs Claude Code vs Copilot vs Windsurf052026 AI 编程工具终极实战指南：Cursor vs Claude Code vs Copilot，开发者该怎么选？06【踩坑记录 | 第一篇】微软商店无法使用时，如何手动安装 OpenAI Codex？附`.msix`文件系统错误解决方法07CC-Switch 下载、安装与使用配置指南【2026.5.29】08Agnes AI 全模态 API 免费实测报告：文生图 + 文生视频完整测试09CC-Switch & Claude 基于 Linux 服务器安装使用指南10AI科技热点日报 | 2026年6月1日