0
点赞
收藏
分享

微信扫一扫

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


【本文目录】

  • ​​💖 前言​​
  • ​​💖 创建表单​​
  • ​​💖 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知识。与此同时,对于日常生活有困扰的朋友,欢迎阅读我的第四栏目:​​《国学周更—心性养成之路》​​,学习技术的同时,我们也注重了心性的养成。

举报

相关推荐

013.文本框和单选框

0 条评论