Servlet的应用(用户注册界面)

embedded/2024/11/29 6:58:05/
  • 表单提交到后台 Servlet:当用户填写完表单并点击注册按钮时,表单数据应该通过 POST 方式提交给后台。
  • 后台 Servlet 处理表单数据:Servlet 会处理从表单接收到的用户数据,进行验证和注册操作。
  • 正确显示中文用户名:在后台需要保证中文数据能够正确接收和显示。

1. 更新前端 HTML 页面,修改表单提交方式

首先,将表单的 action 属性设置为后台 Servlet 的 URL,并且设置 method="POST" 使其采用 POST 方式提交。

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>用户注册</title><style>body {font-family: Arial, sans-serif;margin: 50px;}.form-container {width: 300px;margin: 0 auto;padding: 20px;border: 1px solid #ccc;border-radius: 10px;}.form-item {margin: 15px 0;}.form-item label {display: block;margin-bottom: 5px;}.form-item input {width: 100%;padding: 8px;border: 1px solid #ccc;border-radius: 5px;}.form-item .error {color: red;font-size: 12px;}.form-item .valid {color: green;font-size: 12px;}.form-item .submit-btn {width: 100%;padding: 10px;background-color: #4CAF50;color: white;border: none;border-radius: 5px;cursor: pointer;}</style>
</head>
<body><div class="form-container"><h2>用户注册</h2><!-- 修改了 action 属性为后台 servlet 地址 --><form id="registrationForm" action="/registerServlet" method="POST" onsubmit="return validateForm()"><div class="form-item"><label for="name">姓名</label><input type="text" id="name" name="name" placeholder="请输入姓名" onblur="checkName()" required><div id="nameError" class="error"></div></div><div class="form-item"><label for="email">邮箱</label><input type="email" id="email" name="email" placeholder="请输入邮箱" onblur="checkEmail()" required><div id="emailError" class="error"></div></div><div class="form-item"><label for="password">密码</label><input type="password" id="password" name="password" placeholder="请输入密码" onblur="checkPassword()" required><div id="passwordError" class="error"></div></div><div class="form-item"><label for="confirmPassword">确认密码</label><input type="password" id="confirmPassword" name="confirmPassword" placeholder="请确认密码" onblur="checkConfirmPassword()" required><div id="confirmPasswordError" class="error"></div></div><div class="form-item"><button type="submit" class="submit-btn">注册</button></div></form></div><script>// 校验函数(与之前一样)function checkName() {var name = document.getElementById('name').value;var nameError = document.getElementById('nameError');var nameRegex = /^[a-zA-Z\u4e00-\u9fa5]{2,20}$/; if (!nameRegex.test(name)) {nameError.textContent = "姓名不合法,需为2-20个字母或汉字";nameError.classList.add("valid");nameError.classList.remove("error");} else {nameError.textContent = "姓名合法";nameError.classList.add("valid");nameError.classList.remove("error");}}// 其他校验函数同样照旧function validateForm() {checkName();checkEmail();checkPassword();checkConfirmPassword();if (document.querySelectorAll('.error').length > 0) {return false;}return true;}</script></body>
</html>

2. 后台 Servlet 处理用户注册

现在,我们来编写一个后台的 Servlet 来处理用户提交的表单数据。

2.1 创建 RegisterServlet.java

import java.io.*;
import javax.servlet.*;
import javax.servlet.http.*;
import java.nio.charset.StandardCharsets;public class RegisterServlet extends HttpServlet {@Overrideprotected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {// 设置请求和响应的字符编码为 UTF-8,保证中文显示正确request.setCharacterEncoding("UTF-8");response.setContentType("text/html;charset=UTF-8");// 获取表单提交的数据String name = request.getParameter("name");String email = request.getParameter("email");String password = request.getParameter("password");String confirmPassword = request.getParameter("confirmPassword");PrintWriter out = response.getWriter();// 验证用户名是否有效if (name == null || name.trim().isEmpty()) {out.println("<h3>用户名不能为空</h3>");return;}// 验证邮箱格式if (email == null || !email.matches("^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\\.[a-zA-Z0-9-.]+$")) {out.println("<h3>邮箱格式不正确</h3>");return;}// 验证密码是否匹配if (!password.equals(confirmPassword)) {out.println("<h3>两次输入的密码不一致</h3>");return;}// 这里可以将用户信息保存到数据库,模拟注册成功// 由于没有数据库,这里就直接输出用户信息out.println("<h3>注册成功!</h3>");out.println("<p>用户名: " + name + "</p>");out.println("<p>邮箱: " + email + "</p>");out.println("<p>密码: " + password + "</p>");}
}

2.2 配置 web.xml

为了让 Servlet 正常工作,我们需要在 web.xml 文件中配置该 Servlet 的 URL 映射。

<web-app xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://java.sun.com/xml/ns/javaeehttp://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"version="3.0"><servlet><servlet-name>RegisterServlet</servlet-name><servlet-class>RegisterServlet</servlet-class></servlet><servlet-mapping><servlet-name>RegisterServlet</servlet-name><url-pattern>/registerServlet</url-pattern></servlet-mapping></web-app>

3. 总结

  1. 前端部分
    • 用户填写表单并点击提交按钮,表单数据通过 POST 方式提交给后台。
    • 表单的 action 属性指定了后台 Servlet 的 URL,method="POST" 指定了提交方式。
  2. 后台部分
    • RegisterServlet 接收表单数据,进行基本的验证(例如检查用户名、邮箱格式、密码是否一致等)。
    • 使用 request.setCharacterEncoding("UTF-8") 来确保能够正确处理中文字符。
    • 如果验证通过,显示注册成功信息,并模拟输出用户的注册信息。

通过这种方式,用户可以在前端提交表单,并通过后台 Servlet 完成注册验证和信息的显示。同时,中文用户名也能正确显示。


http://www.ppmy.cn/embedded/141386.html

相关文章

(长期更新)《零基础入门 ArcGIS(ArcMap) 》实验二----网络分析(超超超详细!!!)

相信实验一大家已经完成了&#xff0c;对Arcgis已进一步熟悉了&#xff0c;现在开启第二个实验 ArcMap实验--网络分析 目录 ArcMap实验--网络分析 1.1 网络分析介绍 1.2 实验内容及目的 1.2.1 实验内容 1.2.2 实验目的 2.2 实验方案 2.3 实验流程 2.3.1 实验准备 2.3.2 空间校正…

DAMODEL丹摩|部署FLUX.1+ComfyUI实战教程

本文仅做测评体验&#xff0c;非广告。 文章目录 1. FLUX.1简介2. 实战2. 1 创建资源2. 1 ComfyUI的部署操作2. 3 部署FLUX.1 3. 测试5. 释放资源4. 结语 1. FLUX.1简介 FLUX.1是由黑森林实验室&#xff08;Black Forest Labs&#xff09;开发的开源AI图像生成模型。它拥有12…

具身智能高校实训解决方案——从AI大模型+机器人到通用具身智能

一、 行业背景 在具身智能的发展历程中&#xff0c;AI 大模型的出现成为了关键的推动力量。这些大模型具有海量的参数和强大的语言理解、知识表示能力&#xff0c;能够为机器人的行为决策提供更丰富的信息和更智能的指导。然而&#xff0c;单纯的大模型在面对复杂多变的现实…

如何在Python中进行数学建模?

数学建模是数据科学中使用的强大工具&#xff0c;通过数学方程和算法来表示真实世界的系统和现象。Python拥有丰富的库生态系统&#xff0c;为开发和实现数学模型提供了一个很好的平台。本文将指导您完成Python中的数学建模过程&#xff0c;重点关注数据科学中的应用。 数学建…

mysql时间计算函数

时间计算函数用于处理日期和时间数据&#xff0c;进行各种时间计算和转换。 以下个人总结了一些常用的时间计算函数及其用法&#xff1a; 1. NOW() 返回当前的日期和时间。 SELECT NOW(); -- 返回当前的日期和时间2. CURDATE() 和 CURTIME() CURDATE() 返回当前的日期。C…

深度学习模型:LSTM (Long Short-Term Memory) - 长短时记忆网络详解

一、引言 在深度学习领域&#xff0c;循环神经网络&#xff08;RNN&#xff09;在处理序列数据方面具有独特的优势&#xff0c;例如语音识别、自然语言处理等任务。然而&#xff0c;传统的 RNN 在处理长序列数据时面临着严重的梯度消失问题&#xff0c;这使得网络难以学习到长…

百度 文心一言 vs 阿里 通义千问 哪个好?

背景介绍&#xff1a; 在当前的人工智能领域&#xff0c;随着大模型技术的快速发展&#xff0c;市场上涌现出了众多的大规模语言模型。然而&#xff0c;由于缺乏统一且权威的评估标准&#xff0c;很多关于这些模型能力的文章往往基于主观测试或自行设定的排行榜来评价模型性能…

机器学习之RLHF(人类反馈强化学习)

RLHF(Reinforcement Learning with Human Feedback,基于人类反馈的强化学习) 是一种结合人类反馈和强化学习(RL)技术的算法,旨在通过人类的评价和偏好优化智能体的行为,使其更符合人类期望。这种方法近年来在大规模语言模型(如 OpenAI 的 GPT 系列)训练中取得了显著成…