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

相关推荐
浅水鲤鱼10 小时前
虚拟机VMware Workstation Pro 25H2设置中文界面
运维
爱潜水的小L11 小时前
自学嵌入式day30，回收进程
java·linux·服务器
liebe1*111 小时前
第九章 防火墙入侵防御
运维·网络·防火墙
橘子真甜～12 小时前
C/C++ Linux网络编程13 - 传输层TCP协议详解（面向字节流和有连接）
linux·运维·服务器·c语言·网络·c++·tcp/ip
嘻哈baby12 小时前
systemd服务管理深入实践从入门到自定义服务
linux·服务器·网络
qq_54702617912 小时前
Docker 搭建Nexus3私服
运维·docker·容器
June`12 小时前
SSH连接原理与守护进程实战
linux·运维·服务器
JH灰色12 小时前
【大模型】-LangChain--stream流式同步异步
服务器·前端·langchain
CQ_YM13 小时前
Linux进程基础
linux·服务器·进程
热门推荐
01GitHub 镜像站点02UV安装并设置国内源03【AutoGLM部署】本地私有化部署AI手机Agent04【超详细教程】手把手教你从微软官网免费下载Windows 10官方原版ISO镜像（2025最新版）05Linux下V2Ray安装配置指南06Cursor 又偷偷更新，这个功能太实用：Visual Editor for Cursor Browser07Open-AutoGLM Windows 安装部署教程08BongoCat - 跨平台键盘猫动画工具09Windows 11 官方系统安装与重装完整教程（2025年最新版）10安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口（持续更新）