【基于Servlet技术处理表单】

news2025/4/16 13:59:51

文章目录

- 一、实验背景与目的
- 二、实验设计与实现思路
- - 1. 功能架构
  - 2. 核心代码实现
  - 3. 测试用例
- 总结

一、实验背景与目的

本次实验旨在深入理解Servlet工作原理，掌握JSP与Servlet的协同开发，实现前端表单与后端数据处理的交互。具体目标包括：设计包含文本输入框和按钮的表单，通过Servlet分析用户输入的字符串，提取其中的数字信息并返回结果。

二、实验设计与实现思路

1. 功能架构

前端（JSP页面）：提供用户输入界面，包含一个文本输入框和提交按钮，通过表单的action属性指定数据提交路径为/tq，采用POST方法发送请求。
后端（Servlet）：接收表单数据，遍历字符串逐个字符判断是否为数字，提取所有数字后通过请求属性传递回JSP页面，最终转发回前端显示结果。

2. 核心代码实现

（1）web.xml配置

<!DOCTYPE web-app PUBLIC
 "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
 "http://java.sun.com/dtd/web-app_2_3.dtd" >

<web-app>
  <display-name>Archetype Created Web Application</display-name>
  <servlet>
    <servlet-name>tqServlet</servlet-name>
    <servlet-class>tqServlet</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>tqServlet</servlet-name>
  </servlet-mapping>
</web-app>

（2）Servlet逻辑

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

public class tqServlet extends HttpServlet {

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        req.setCharacterEncoding("utf-8");
        String text= req.getParameter("text");
        System.out.println("text:"+text);
        String num="";
        for(int i=0;i<text.length();i++){
           char c=text.charAt(i);
           if(c>='0'&&c<='9'){
               num=num+c;
           }
        }
        if(num.length()==0){num="字符串不包含数字";}
        System.out.println("num:"+num);

    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doGet(req, resp);
    }
}

（3）JSP页面

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数字提取</title>
    <script src="js/sub.js"></script>
    <link rel="stylesheet" href="css/login.css" type="text/css">
</head>
<body>


<div class="login">
    <form action="tq" method="post" id="myform" name="myform">
        <div class="container">
            <input type="text" name="text" placeholder="请输入字符串">
            <span class="left"></span>

        </div>
        <div class="result"><%=request.getAttribute("num")==null?"":request.getAttribute("num")%></div>
        <div class="btn"><input type="submit" value="提取数字"></div>

    </form>
</div>

</body>
</html>

3. 测试用例

全数字输入：如“12345”，输出“12345”。
数字与其他字符混合：如“a1b2c3”，输出“123”。
无数字输入：如“abc汉字”，输出“字符串不包含数字”。

总结

本三种情况运行结果清晰。且错误输入的运行后提示信息正确。

在这里插入图片描述
遇到符合情况会直接输出数字。

输入字符和数字结合，会自动提取数字，实现全数字输出的结果。

若是输出中没有数字，会提示字符串不包含数字。

遇到的问题
1.编码问题：在Servlet中通过req.setCharacterEncoding("utf-8")解决中文乱码，确保前端表单数据与后端处理编码一致。
2.请求转发与参数传递：使用request.setAttribute()存储处理结果，通过getRequestDispatcher().forward()将数据回传至JSP，避免直接响应输出导致的页面跳转数据丢失。
3.字符遍历效率：最初考虑使用正则表达式\\d匹配数字，后选择逐字符判断，在简单场景下更易理解和维护，体现了“合适技术优于复杂方案”的工程思维。
心得：我深刻理解Servlet作为“请求-响应”处理器的生命周期，doGet与doPost方法的差异化处理，以及通过web.xml配置URL映射的底层逻辑。
本次实验让我从“理论认知”过渡到“实战落地”。过去认为Servlet只是JavaEE的一个组件，实际操作中却发现它是连接前端页面与后端逻辑的核心桥梁。每一次请求的接收、处理与响应，都涉及网络通信、数据解析、业务逻辑和视图渲染的协同，这让我对Web开发的分层架构有了更立体的理解。
实验中实现的数字提取功能虽简单，但为复杂Web应用奠定了基石。未来我计划深入学习Spring MVC等框架，探索RESTful接口设计和异步请求处理，同时加强前端技术（如Vue.js）的学习，成为能兼顾前后端的全栈开发者。这次实验不仅是一次课程作业，更是我踏入Web开发领域的起点——让我明白，真正的技术成长，始于对每一个小功能的认真打磨。