0
点赞
收藏
分享

微信扫一扫

Servlet与表单数据交互（如文本框、单选按钮、复选框、下拉列表等）

像小强一样活着 2022-12-11 阅读 207
servletjavaintellij-idea前端tomcat系统/运维


【本文目录】

  • ​​💖 前言​​
  • ​​💖 创建表单​​
  • ​​💖 Servlet类​​
  • ​​💖 文本字段和密码字段值的读取​​
  • ​​💖 单选按钮字段值的读取​​
  • ​​💖 复选框字段值的读取​​
  • ​​💖 下拉列表（组合框）字段值的读取​​
  • ​​💖 文本区域字段值的读取​​
  • ​​💖 完整代码分享​​

Servlet与表单数据交互（如文本框、单选按钮、复选框、下拉列表等）_前端

💖 前言

动态Web请求中最重要的是与访问用户的交互。而交互性的基本形式就是HTML表单，表单中常用的提交模式为POST，这样就必须在处理的Servlet类中明确进行doPost()方法覆写。

本篇中，我将指导您如何使用Java Servlet从服务器端的 HTML 表单中读取常用输入字段的值。您知道，处理以 HTML 页面表示的表单数据是 Web 开发中非常常见的任务。一个典型的场景是用户填写表单的字段并提交。服务器将根据提交的数据处理请求，并将响应发送回客户端。

下图描述了在服务器端使用 Java servlet 的工作流：

Servlet与表单数据交互（如文本框、单选按钮、复选框、下拉列表等）_servlet_02

💖 创建表单

在form01.html页面中创建表单，我们需要使用以下标签：

  • <form>：创建一个表单以在其正文中添加字段。
  • <input> , <select> , <textarea> …：创建表单字段，如文本框、密码框、单选按钮、复选框、下拉列表、文本区域……和提交按钮。

为了使表单与 Java servlet 一起工作，我们需要为标记指定以下属性：

  • method =”post”：将表单数据作为 HTTP POST 请求发送到服务器。一般情况下，表单提交应该在 HTTP POST 方法中完成。
  • action =” servlet 的 URL ”：指定负责处理从该表单发布的数据的 servlet 的相对 URL。

在进行表单提交时需要注意请求处理的Servlet映射路径要与HTML页面路径相匹配。例如：form01.html页面储存在/welcome路径下，为了便于访问一般会将Servlet的映射路径也设置同样的路径，如下图所示：

Servlet与表单数据交互（如文本框、单选按钮、复选框、下拉列表等）_java_03

💖 Servlet类

servlet 的 URL 由servlet 类之前的 @WebServlet 注释指定。当用户提交上面的登录表单时，servlet 容器会调用servlet 的 doPost()方法

  • 通过请求
  • 做一些处理，例如连接到数据库来验证用户名和密码。
  • 通过响应

为了读取表单字段的值，HttpServletRequest

  • String getParameter(String name)：获取由给定名称指定的字段的值，作为字符串。如果不存在具有给定名称的表单字段，则该方法返回 null。
  • String[] getParameterValues(String name): 在 String 对象数组中获取一组具有相同名称的字段的值。如果不存在具有给定名称的字段，则该方法返回 null。
    请注意，上述方法还可以处理 URL 查询字符串中的参数，因此名称为 getParameter。

例如，我们可以在doPost()方法中编写以下代码来读取表单字段的值：

String name= req.getParameter("userName");
        String age= req.getParameter("userAge");

要将响应发送回客户端，我们需要通过调用HttpServletResponse接口的 getWriter()方法 从响应对象中获取写入器，然后使用print()或println()方法

String name= req.getParameter("userName");
        String age= req.getParameter("userAge");
        resp.getWriter().println("你好！"+name+"！你今年"+age+"岁！");

💖 文本字段和密码字段值的读取

【1】HTML 表单代码

<p>用户名：<input type="text" name="userName"/></p>
  <p>用户密码：<input type="password" name="userPassword"/></p>

【2】HTML 表单运行效果

Servlet与表单数据交互（如文本框、单选按钮、复选框、下拉列表等）_tomcat_04

【3】Servlet 中的 Java 代码

String name= req.getParameter("userName");
        String password= req.getParameter("userPassword");
        resp.getWriter().println("用户名："+name+",用户密码："+password);

【4】提交表单后运行效果

Servlet与表单数据交互（如文本框、单选按钮、复选框、下拉列表等）_tomcat_05

💖 单选按钮字段值的读取

【1】HTML 表单代码

<p>性别：<input type="radio" name="sex" value="男" checked/>男 
    <input type="radio" name="sex" value="女"/>女</p>

【2】HTML 表单运行效果

Servlet与表单数据交互（如文本框、单选按钮、复选框、下拉列表等）_tomcat_06

【3】Servlet 中的 Java 代码

String sex= req.getParameter("sex");
  resp.getWriter().println("性别："+sex);

【4】提交表单后运行效果

Servlet与表单数据交互（如文本框、单选按钮、复选框、下拉列表等）_java_07

💖 复选框字段值的读取

【1】HTML 表单代码

<p>兴趣爱好：<input type="checkbox" name="hobby" value="篮球"/>篮球 
       <input type="checkbox" name="hobby" value="足球"/>足球</p>

【2】HTML 表单运行效果

Servlet与表单数据交互（如文本框、单选按钮、复选框、下拉列表等）_java_08

【3】Servlet 中的 Java 代码

String[] hobbys=req.getParameterValues("hobby");
        String a="";
        for(int i=0;i<hobbys.length;i++)
        {a+="【"+hobbys[i]+"】";}
        resp.getWriter().println("兴趣爱好："+a);

【4】提交表单后运行效果

Servlet与表单数据交互（如文本框、单选按钮、复选框、下拉列表等）_tomcat_09

💖 下拉列表（组合框）字段值的读取

【1】HTML 表单代码

用户年龄：<select name="userAge">
      <option name="opAge" value="18">18</option>
      <option name="opAge" value="19">19</option>
      <option name="opAge" value="20">20</option>
      <option name="opAge" value="21">21</option>
  </select>

【2】HTML 表单运行效果

Servlet与表单数据交互（如文本框、单选按钮、复选框、下拉列表等）_java_10

【3】Servlet 中的 Java 代码

String opAge = req.getParameter("userAge");
        resp.getWriter().println("年龄："+opAge);

【4】提交表单后运行效果

Servlet与表单数据交互（如文本框、单选按钮、复选框、下拉列表等）_servlet_11

💖 文本区域字段值的读取

【1】HTML 表单代码

<p>个人简介：<textarea name="perIntro" rows="5" cols="30"></textarea></p>

【2】HTML 表单运行效果

Servlet与表单数据交互（如文本框、单选按钮、复选框、下拉列表等）_intellij-idea_12

【3】Servlet 中的 Java 代码

String perIntro= req.getParameter("perIntro");
        resp.getWriter().println("个人简介："+perIntro);

【4】提交表单后运行效果

Servlet与表单数据交互（如文本框、单选按钮、复选框、下拉列表等）_servlet_13

💖 完整代码分享

【1】HTML页面：form01.html 代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>作业一</title>
</head>
<body>
<!--welcome为HTML页面路径，要与Servlet映射路径相匹配-->
<form action="welcome" method="post">
  <p>用户名：<input type="text" name="userName"/></p>
  <p>用户密码：<input type="password" name="userPassword"/></p>
  <p>性别：<input type="radio" name="sex" value="男" checked/>男 <input type="radio" name="sex" value="女"/>女</p>
  <p>兴趣爱好：<input type="checkbox" name="hobby" value="篮球"/>篮球 <input type="checkbox" name="hobby" value="足球"/>足球</p>
    用户年龄：<select name="userAge">
      <option name="opAge" value="18">18</option>
      <option name="opAge" value="19">19</option>
      <option name="opAge" value="20">20</option>
      <option name="opAge" value="21">21</option>
  </select>
  <p>个人简介：<textarea name="perIntro" rows="5" cols="30"></textarea></p>
  <p><input type="submit" value="提交"/></p>
</form>
</body>
</html>

【2】Servlet类：FormServletDemo01.java 代码

package cn.lqgx.www;

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;

//注解方式替换web.xml中的配置，Servlet映射路径
@WebServlet("/welcome")
public class FormServletDemo01 extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        req.setCharacterEncoding("UTF-8");
        resp.setCharacterEncoding("UTF-8");
        String name= req.getParameter("userName");
        String password= req.getParameter("userPassword");
        String sex= req.getParameter("sex");

        String[] hobbys=req.getParameterValues("hobby");
        String a="";
        for(int i=0;i<hobbys.length;i++)
        {a+="【"+hobbys[i]+"】";}

        String opAge = req.getParameter("userAge");
        String perIntro= req.getParameter("perIntro");
        resp.getWriter().println("用户名："+name+",用户密码："+password+",性别："+sex+",兴趣爱好："+a+",年龄："+opAge+"，个人简介："+perIntro);
//        System.out.println("用户名："+name+",用户密码："+password+",性别："+sex+",兴趣爱好："+a+",年龄："+opAge);
    }

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

【3】架构图特别说明

Servlet与表单数据交互（如文本框、单选按钮、复选框、下拉列表等）_前端_14

【4】完整代码运行效果

html页面：

Servlet与表单数据交互（如文本框、单选按钮、复选框、下拉列表等）_servlet_15


【5】提交表单后运行效果：

Servlet与表单数据交互（如文本框、单选按钮、复选框、下拉列表等）_servlet_16

Java系列知识，点击​关注博主​​，博主带你零基础学习Java知识。与此同时，对于日常生活有困扰的朋友，欢迎阅读我的第四栏目：​​《国学周更—心性养成之路》​​，学习技术的同时，我们也注重了心性的养成。

举报

相关推荐

android页面必须体现文本框、编辑框、单选按钮、复选框按钮、按钮、Listview控件

控件Android单选按钮移动开发

【HTML】HTML 注册表单案例 ② ( 表格中的内容设置 | 下拉列表 | 输入文本框 | 复选框 | 文本域 | 图片按钮 | 链接 )

html表格下拉列表复选框文本框HarmonyOS后端开发

web前端入门到实战：html基本标签表单实现交互原理，单选框，复选框，下拉框介绍

日记本让前端飞网页前端后台技...

PHP获取表单值 php获取下拉列表的值 php获取单选框 列表框 复选框的值:

php上传数据PHP前端开发

Bootstrap复选框和单选按钮美化插件

bootstrapjavascripthtml

13、文本框和单选框

centoslinux运维

013.文本框和单选框

李林林编程语言

纯CSS方法美化一个单选按钮/复选框

Vue前端技术CSS视觉艺术基础前端

Selenium4+Python3系列（八） - Cookie、截图、单选框及复选框处理、富文本框、日历控件操作

python示例代码cssselenium4+python3Python编程语言技术人为什么要写博客？

Android学习使用基本界面组件（下拉框，单选框，复选框，数字转轮，滚动条）

Androidandroidxmlide系统/运维
0 条评论