使用JavaScript提交表单数据至Servlet时request.getParameter返回null的原因排查

我来帮你分析这个问题的根源，以及对应的解决办法：

问题根源 #

当你不用JavaScript，直接让浏览器默认提交表单时，浏览器会自动把表单数据编码成application/x-www-form-urlencoded格式——这是Servlet容器（比如Tomcat）默认支持解析的格式，所以request.getParameter("firstname")能正常拿到值。

但你用FormData对象配合Fetch API提交时，Fetch会自动将请求的Content-Type设置为multipart/form-data，而Servlet默认不会自动解析这种格式的表单数据，所以request.getParameter()就会返回null。

解决办法 #

这里有两种可行的方案，你可以根据需求选择：

方案1：让Fetch发送application/x-www-form-urlencoded格式的数据 #

修改JavaScript代码，把FormData转换成URL编码格式，同时手动设置请求头，和浏览器默认提交格式保持一致：

document.getElementById('contact-form').addEventListener('submit', function (event) {
    event.preventDefault();
    const form = this;
    // 将FormData转换为URL编码格式
    const formData = new URLSearchParams(new FormData(form));

    fetch(form.action, {
        method: 'POST',
        body: formData,
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
        }
    })
    .then(response => response.ok)
    .then(data => {
        form.querySelector('.sent-message').classList.add('d-block');
        console.log(data);
    })
    .catch(error => {
        console.error('Error:', error);
    });
});

这种方式下，你的现有Servlet代码不需要任何改动就能正常获取参数。

方案2：在Servlet中解析multipart/form-data格式的数据 #

如果后续需要上传文件，必须保留multipart/form-data提交方式，那就要修改Servlet代码来适配：

首先给Servlet类添加@MultipartConfig注解，告诉容器这是处理多部分表单的Servlet，再通过getPart方法读取参数：

package com.pz.controller;

import java.io.IOException;
import java.io.PrintWriter;

import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.MultipartConfig;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import jakarta.servlet.http.Part;

@MultipartConfig // 新增注解，标记为多部分表单处理器
public class FormServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;

    public FormServlet() {
        super();
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.getWriter().append("Served at: ").append(request.getContextPath());
    }

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // 通过getPart获取表单参数
        Part namePart = request.getPart("firstname");
        String name = new String(namePart.getInputStream().readAllBytes());
        System.out.println(name);

        if (name == null || name.isEmpty()) {
            response.getWriter().println("Name field is required.");
            return;
        }
        PrintWriter out = response.getWriter();
        out.println("OK");
    }
}

不过这种方式读取普通文本参数会稍显繁琐，若表单不需要上传文件，方案1会更简单直接。

额外排查技巧 #

你可以打开浏览器开发者工具（F12）的网络标签，对比两种提交方式的请求头和请求体，能直观看到Content-Type的区别——这是排查这类参数解析问题的常用手段。

备注：内容来源于stack exchange，提问作者Pravin Zugare