表单文本框里写太多字就出 404 了？原因和解决办法都在这儿！

[1. 表单的enctype 属性](#1. 表单的enctype 属性)
[2. 404 错误的原因分析](#2. 404 错误的原因分析)
- [(1) 路径片段截断](#(1) 路径片段截断)
- [(2) 后端路径解析逻辑](#(2) 后端路径解析逻辑)
3.字符数量导致问题的原因
- (1)字数较少时正常的原因
- (2)字数较多时出现问题的原因
[4. POST 请求与 multipart/form-data 的兼容性问题](#4. POST 请求与 multipart/form-data 的兼容性问题)
[5. 表单提交方法的影响](#5. 表单提交方法的影响)
- (1) 表单自动提交（$("#applyaddfm").submit();）.submit();）)
- [(2) 手动提交（httpPost 函数）](#(2) 手动提交（httpPost 函数）)
[6. 解决方案](#6. 解决方案)
- [(1) 移除 enctype="multipart/form-data"（适用于无文件上传）](#(1) 移除 enctype="multipart/form-data"（适用于无文件上传）)
- [(2) 使用 fetch 或 XMLHttpRequest 提交数据](#(2) 使用 fetch 或 XMLHttpRequest 提交数据)
- [(3) 调整后端解析逻辑](#(3) 调整后端解析逻辑)
[6.后端（JVAV）设置处理 multipart/form-data 请求的方法：](#6.后端（JVAV）设置处理 multipart/form-data 请求的方法：)
- [使用 Servlet 3.0：在 web.xml 中配置 MultipartConfig：](#使用 Servlet 3.0：在 web.xml 中配置 MultipartConfig：)
- 示例代码：
- 关键点：
[7. 总结](#7. 总结)

1. 表单的`enctype` 属性

enctype 属性用于指定表单数据在提交时的编码方式，决定了浏览器如何封装和发送数据。

application/x-www-form-urlencoded ：
- 未指定 enctype 时，浏览器会使用此值。
- 编码方式 ：表单数据会被编码为名称/值对 ，特殊字符会被转换为 ASCII 十六进制值。例如，空格会被转换为 + 号。
- 适用场景：适用于常规的表单提交，其中不包含文件上传。
multipart/form-data ：
- 编码方式 ：表单数据以二进制形式编码，允许发送文本和二进制文件。
- 数据分割 ：multipart/form-data 会将表单数据分割成多个部分（part），每个部分有自己的边界（boundary）。
- 边界生成：浏览器会自动生成边界字符串，这些边界字符串可能会占用额外的字节数。
- 浏览器默认行为 ：当 enctype 设置为 multipart/form-data 时，浏览器会自动处理表单数据的分割和边界生成。
- 数据格式 ：multipart/form-data 的数据格式较为复杂，可能会导致后端解析失败或路径匹配错误。
- 适用场景 ：用于文件上传。当表单中包含 <input type="file"> 时，必须将 enctype 设置为 multipart/form-data。
text/plain ：
- 编码方式 ：表单数据以纯文本形式发送，不进行特殊字符的编码。空格会被转换为 + 号，但特殊字符不会被编码。
- 适用场景：通常用于发送纯文本信息，如电子邮件等。这种格式不常用，因为它不提供数据的转义或保护。

注意：

GET 方法 ：如果表单使用 GET 方法发送数据，enctype 属性无效。数据将以 URL 的查询字符串形式发送。
服务器端处理 ：在使用 multipart/form-data 时，后端需要处理，去解析这种类型的数据。通常是通过解析上传的文件流来实现。

2. 404 错误的原因分析

404 错误通常是请求的路径未找到，而不是直接由字符限制或编码问题导致的。可能与表单数据量或编码方式有关。以下是一些可能的路径相关问题：

(1) 路径片段截断

当使用 multipart/form-data 提交大量数据时，某些中间件或服务器可能对请求体的大小有限制，导致路径信息或请求参数被截断，使得后端无法正确匹配路径。

(2) 后端路径解析逻辑

如果后端对 multipart/form-data 请求的路径解析逻辑与普通表单不同，可能会导致路径匹配失败。

3.字符数量导致问题的原因

(1)字数较少时正常的原因

数据量较小 ：当输入的字数较少时，生成的 boundary 和分割部分较少，数据格式相对简单，后端能够正确解析。
路径未被截断：较少的数据量不会导致路径或参数被截断，因此请求能够正常到达后端。

(2)字数较多时出现问题的原因

数据量过大 ：当输入的字数较多时，生成的 boundary 和分割部分增多，数据格式变得复杂，可能导致后端解析失败。
路径或参数被截断：大量的数据可能导致路径或参数被截断，导致请求无法正确匹配后端路径，从而返回 404 错误。
后端限制 ：后端可能对 multipart/form-data 的请求体大小有限制，超过限制时会导致解析失败或路径匹配错误。

4. `POST` 请求与 `multipart/form-data` 的兼容性问题

当使用 POST 请求且 enctype="multipart/form-data" 时，以下因素可能导致问题：

boundary 生成问题 ：浏览器自动生成的 boundary 可能与后端的解析逻辑不匹配。
字段格式问题 ：某些字段可能未被正确包含在 multipart/form-data 的请求体中。

5. 表单提交方法的影响

$("#applyaddfm").submit(); 使用了表单的默认提交行为，而 httpPost 函数手动构建了一个新的表单并提交。这两者之间的差异可能导致问题。

(1) 表单自动提交（`$("#applyaddfm").submit();`）

如果表单的 enctype 是 multipart/form-data，浏览器会以特定的格式发送请求体，但由于某些原因（如 boundary 未正确生成或字段格式不规范），可能导致后端无法正确解析路径或参数，进而返回 404。

(2) 手动提交（`httpPost` 函数）

手动创建的表单可能未设置 enctype="multipart/form-data"，浏览器会以默认的 application/x-www-form-urlencoded 格式提交数据，后端能更稳定地解析。

6. 解决方案

(1) 移除 `enctype="multipart/form-data"`（适用于无文件上传）

如果表单无需文件上传功能，移除 enctype，让浏览器使用默认的 application/x-www-form-urlencoded 编码方式：

html 复制代码

<form name="fm" id="applyaddfm" method="post" onsubmit="queryWait()">
  <!-- 表单内容 -->
</form>

(2) 使用 `fetch` 或 `XMLHttpRequest` 提交数据

使用现代 AJAX 方法（如 fetch）提交数据，灵活控制请求格式：

javascript 复制代码

fetch('${ctx}/lossAndDuty/car_query.do', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded'
  },
  body: new URLSearchParams($("#applyaddfm").serialize())
})
.then(response => response.json())
.then(data => console.log(data));

(3) 调整后端解析逻辑

增加请求体大小限制 ：确保后端能处理较大的 multipart/form-data 请求。
优化路径匹配逻辑：确保路径匹配不受数据量影响。

6.后端（JVAV）设置处理 `multipart/form-data` 请求的方法：

使用 Servlet 3.0：在 `web.xml` 中配置 `MultipartConfig`：

xml 复制代码

<web-app>
  <servlet-mapping>
    <servlet-name>default</servlet-name>
    <url-pattern>/</url-pattern>
  </servlet-mapping>

  <multipart-config>
    <max-file-size>10485760</max-file-size> <!-- 文件最大尺寸，单位字节 -->
    <max-request-size>10485760</max-request-size>
    <file-size-threshold>0</file-size-threshold>
  </multipart-config>
</web-app>

示例代码：

java 复制代码

import javax.servlet.*;
import javax.servlet.http.*;
import java.io.*;

public class FileUploadServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // 检查是否是多部分请求
        if (ServletFileUpload.isMultipartContent(request)) {
            // 配置文件上传
            DiskFileItemFactory factory = new DiskFileItemFactory();
            ServletFileUpload upload = new ServletFileUpload(factory);

            // 解析请求
            List<FileItem> items = upload.parseRequest(request);

            for (FileItem item : items) {
                if (item.isFormField()) {
                    // 处理普通表单字段
                    String fieldName = item.getFieldName();
                    String fieldValue = item.getString();
                    System.out.println(fieldName + ": " + fieldValue);
                } else {
                    // 处理文件字段
                    String fileName = item.getName();
                    item.write(new File("uploads/" + fileName));
                    System.out.println("File uploaded: " + fileName);
                }
            }
        }
    }
}

关键点：

ServletFileUpload：用于解析 multipart/form-data 请求。
item.write()：将文件保存到指定路径。

7. 总结

表单文本框内容过多导致 404 错误，通常是由于 multipart/form-data 的复杂性引发的路径截断或后端解析失败。通过移除 enctype、使用现代 AJAX 方法或调整后端逻辑，可以有效解决该问题。