零基础JavaWeb入门——第4课：表单处理 —— 浏览器怎么把数据发给服务器

本系列文章适合JavaWeb入门以及大学期末复习

一、聊聊天：登录时发生了什么？

二、

[标签 ------ 数据的"快递单"](#标签 —— 数据的“快递单”)

三、动手：创建登录表单

四、核心方法：request.getParameter()

[五、GET vs POST ------ 亲眼看看区别](#五、GET vs POST —— 亲眼看看区别)

本节课目标 ：理解表单原理，掌握GET和POST区别，学会用 request.getParameter() 接收数据。

一、聊聊天：登录时发生了什么？

打开教务系统 → 输入学号密码 → 点登录 → 系统就知道你是谁了。

你输入的学号和密码，怎么从浏览器跑到服务器的？

靠的就是------表单（Form）。

二、`<form>` 标签 ------ 数据的"快递单"

html 复制代码

<form action="接收数据的页面" method="提交方式">
    <input type="text" name="参数名">
    <input type="submit" value="提交">
</form>

属性	作用
`action`	数据提交到哪个页面
`method`	提交方式：`get` 或 `post`
`name`	参数的名字，接收时必须一致

三、动手：创建登录表单

文件1 ：login.html

html 复制代码

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>登录</title></head>
<body>
    <h1>用户登录</h1>
    <form action="login_result.jsp" method="post">
        用户名：<input type="text" name="username"><br><br>
        密码：<input type="password" name="password"><br><br>
        <input type="submit" value="登录">
点击后会把当前form表单下的全部内容提交到"login_result.jsp"
    </form>
</body>
</html>

文件2 ：login_result.jsp

html 复制代码

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
    request.setCharacterEncoding("UTF-8");  // 防中文乱码，必须放最前面
%>
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>结果</title></head>
<body>
    <h1>你提交的数据</h1>
    <%
        String username = request.getParameter("username");
使用request.getParameter获取
        String password = request.getParameter("password");
    %>
    <p>用户名：<%= username %></p>
    <p>密码：<%= password %></p>
    <a href="login.html">返回</a>
</body>
</html>

运行 login.html，输入内容点登录，看结果。

四、核心方法：`request.getParameter()`

后面会专门讲解jsp中的九大内置方法

java 复制代码

String username = request.getParameter("username");

关键规则 ：括号里的名字 必须和表单中 name 属性一致。

html 复制代码

<input type="text" name="username">   ← 表单中的name
                     ↓
request.getParameter("username")      ← 接收时的名字

五、GET vs POST ------ 亲眼看看区别

我们会发现form这一行有一个method，method有两个方法可选，分别是get和post

html 复制代码

  <form action="login_result.jsp" method="post">

把 login.html 的 method="post" 改成 method="get"，重新运行，看地址栏。

GET方式，提交后地址栏变成：

复制代码

login_result.jsp?username=admin&password=123456
                ↑ 数据就在URL中，完全可见！

这样的话密码都暴露了

POST方式，地址栏不变：

复制代码

login_result.jsp
                ↑ 数据不可见

对比表

	GET	POST
数据位置	URL中可见	请求体中隐藏
长度限制	有（约2KB）	无
安全性	低（密码暴露）	高
用途	搜索、查询	登录、注册

比喻：GET是明信片（谁都能看），POST是密封信（只有收件人能看）。

六、POST中文乱码解决

html 复制代码

<%
    request.setCharacterEncoding("UTF-8");  // ★ 必须在所有 getParameter() 之前
%>

原因：浏览器用UTF-8发，Tomcat默认用ISO-8859-1收，编解码不一致。这行就是告诉Tomcat"请用UTF-8"。

七、各种控件的接收方式汇总

创建 full_form.html：

html 复制代码

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>完整表单</title></head>
<body>
    <h1>信息登记</h1>
    <form action="full_form_result.jsp" method="post">
        姓名：<input type="text" name="name"><br><br>
        密码：<input type="password" name="pwd"><br><br>
        性别：
        <input type="radio" name="gender" value="男">男
        <input type="radio" name="gender" value="女">女<br><br>
        爱好：
        <input type="checkbox" name="hobby" value="读书">读书
        <input type="checkbox" name="hobby" value="运动">运动
        <input type="checkbox" name="hobby" value="音乐">音乐<br><br>
        城市：
        <select name="city">
            <option value="">--请选择--</option>
            <option value="北京">北京</option>
            <option value="上海">上海</option>
            <option value="广州">广州</option>
        </select><br><br>
        简介：<br>
        <textarea name="intro" rows="4" cols="30"></textarea><br><br>
        <input type="submit" value="提交">
    </form>
</body>
</html>

创建 full_form_result.jsp：

html 复制代码

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
    request.setCharacterEncoding("UTF-8");
%>
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>结果</title></head>
<body>
    <h1>你提交的信息</h1>
    <%
        String name = request.getParameter("name");
        String pwd = request.getParameter("pwd");
        String gender = request.getParameter("gender");
        String city = request.getParameter("city");
        String intro = request.getParameter("intro");

        // ★ 复选框用 getParameterValues()，返回数组
        String[] hobbies = request.getParameterValues("hobby");
    %>
    <p>姓名：<%= name %></p>
    <p>密码：<%= pwd %></p>
    <p>性别：<%= gender %></p>
    <p>爱好：
        <%
            if (hobbies != null) {
                for (String h : hobbies) {
                    out.print(h + " ");
                }
            } else {
                out.print("未选择");
            }
        %>
    </p>
    <p>城市：<%= city %></p>
    <p>简介：<%= intro %></p>
    <a href="full_form.html">返回</a>
</body>
</html>

总结

控件	接收方法	返回值
文本框、密码框	`getParameter()`	String
单选按钮	`getParameter()`	String
下拉框	`getParameter()`	String
文本域	`getParameter()`	String
复选框（多选）	`getParameterValues()`	String\[\] 数组

八、空值安全处理

用户什么都不填就提交，getParameter() 返回 null，此时需要特殊处理一下，因为如果name为null时使用getParameter()会报错程序会崩溃。

这里需要区分一下用户输入' '提交，此时getParameter() 返回不是null，而是' '

html 复制代码

<%
    String name = request.getParameter("name");
    
    // ❌ 危险：name为null时崩溃
    // if (name.equals("admin")) { }
    
    // ✅ 安全写法
    if ("admin".equals(name)) { out.print("是管理员"); }
    
    // ✅ 判断是否为空
    if (name != null && !name.trim().isEmpty()) { out.print("你填了名字"); }
更为安全完整的检查 trim()去除首尾空格，isEmpty判断去除空格后是否为空，检查name是否是纯空格和空字符串
%>

九、帮你捋一捋

复制代码

表单处理三步走：
1. HTML写 <form action="目标页" method="post">，每个input有name
2. JSP用 request.getParameter("name") 接收
3. POST方式加 request.setCharacterEncoding("UTF-8") 防乱码

GET vs POST：
  GET  → 数据在URL，能看见，适合查询
  POST → 数据隐藏，更安全，适合登录

单个值：getParameter()
多个值（复选框）：getParameterValues()

零基础JavaWeb入门——第4课：表单处理 —— 浏览器怎么把数据发给服务器

一、聊聊天：登录时发生了什么？

二、<form> 标签 ------ 数据的"快递单"

三、动手：创建登录表单

四、核心方法：request.getParameter()

五、GET vs POST ------ 亲眼看看区别

对比表

六、POST中文乱码解决

七、各种控件的接收方式汇总

总结

八、空值安全处理

九、帮你捋一捋

二、`<form>` 标签 ------ 数据的"快递单"

四、核心方法：`request.getParameter()`