本节课实现前后端简单交互 :编写 HTML 表单,分别演示 GET/POST 提交、后端接收参数、解决乱码问题,是 Web 开发最基础的交互能力。
一、项目结构(沿用上个项目)
plaintext
FirstWeb
├── index.html # 表单页面
└── WEB-INF
├── classes
│ ├── GetParamServlet.class
│ └── PostParamServlet.class
├── lib
│ ├── servlet-api.jar
│ └── jsp-api.jar
└── web.xml
二、第一步:编写 HTML 表单页面
在项目根目录新建 form.html,提供两个表单分别测试 GET、POST 提交:
html预览
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>表单提交测试</title>
</head>
<body>
<h3>GET方式提交表单</h3>
<!-- action:提交地址,method:请求方式 -->
<form action="getParam" method="get">
用户名:<input type="text" name="username"><br>
年龄:<input type="text" name="age"><br>
<input type="submit" value="GET提交">
</form>
<hr>
<h3>POST方式提交表单</h3>
<form action="postParam" method="post">
用户名:<input type="text" name="username"><br>
年龄:<input type="text" name="age"><br>
<input type="submit" value="POST提交">
</form>
</body>
</html>
三、第二步:编写 Servlet 代码
1. 处理 GET 请求:GetParamServlet.java
java运行
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
public class GetParamServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// 设置响应编码,解决页面中文乱码
response.setContentType("text/html;charset=UTF-8");
// 1. 获取单个请求参数:根据表单name取值
String username = request.getParameter("username");
String age = request.getParameter("age");
// 2. 响应数据到浏览器
PrintWriter out = response.getWriter();
out.write("<h3>GET 请求接收结果</h3>");
out.write("用户名:" + username + "<br>");
out.write("年龄:" + age);
out.close();
}
}
2. 处理 POST 请求:PostParamServlet.java
POST 请求默认会中文乱码,必须额外设置请求编码:
java运行
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
public class PostParamServlet extends HttpServlet {
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// ========== 核心:解决POST请求中文乱码(必须写在最前面) ==========
request.setCharacterEncoding("UTF-8");
response.setContentType("text/html;charset=UTF-8");
// 获取参数
String username = request.getParameter("username");
String age = request.getParameter("age");
// 响应结果
PrintWriter out = response.getWriter();
out.write("<h3>POST 请求接收结果</h3>");
out.write("用户名:" + username + "<br>");
out.write("年龄:" + age);
out.close();
}
}
四、第三步:配置 web.xml 映射
打开 WEB-INF/web.xml,追加两个 Servlet 的注册和映射:
xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee
http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
version="4.0">
<!-- 原有 HelloServlet 配置保留 -->
<servlet>
<servlet-name>HelloServlet</servlet-name>
<servlet-class>HelloServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>HelloServlet</servlet-name>
<url-pattern>/hello</url-pattern>
</servlet-mapping>
<!-- 注册 GET 参数 Servlet -->
<servlet>
<servlet-name>GetParamServlet</servlet-name>
<servlet-class>GetParamServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>GetParamServlet</servlet-name>
<url-pattern>/getParam</url-pattern>
</servlet-mapping>
<!-- 注册 POST 参数 Servlet -->
<servlet>
<servlet-name>PostParamServlet</servlet-name>
<servlet-class>PostParamServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>PostParamServlet</servlet-name>
<url-pattern>/postParam</url-pattern>
</servlet-mapping>
</web-app>
五、编译、部署、测试
- 编译两个 Java 文件,将生成的
.class文件放入WEB-INF/classes - 重启 Tomcat 服务器
- 浏览器访问:
http://localhost:8080/FirstWeb/form.html - 分别输入中文 / 英文,点击两个提交按钮观察效果:
- GET:参数会拼接在浏览器地址栏中,明文展示
- POST:地址栏无参数,相对更安全,需手动设置编码防乱码
六、核心知识点
1. 核心方法
request.getParameter("name值"):获取单个表单参数,返回字符串- 表单
<input>的name属性,必须和代码里的参数名一致,否则取不到值
2. GET 与 POST 区别
- GET
- 参数拼接在 URL 地址栏,可见、不安全
- 有长度限制
- 中文一般不易乱码
- POST
- 参数放在请求体中,地址栏不可见,相对安全
- 无长度限制
- 必须添加
request.setCharacterEncoding("UTF-8")解决中文乱码
3. 乱码解决方案(固定模板)
java运行
// POST 请求专属(第一行代码)
request.setCharacterEncoding("UTF-8");
// 统一响应编码
response.setContentType("text/html;charset=UTF-8");
4. 通用小技巧
如果想让 doGet 和 doPost 复用一套代码,可以互相调用:
java运行
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) {
doPost(request, response);
}
七、记忆口诀
表单提交分两种,GET 露参 POST 藏; 取值全靠 getParameter,name 对应不能忘; POST 先设请求码,中文乱码全跑光!