目录
- 1. 表单的enctype 属性
- 2. 404 错误的原因分析
- 3.字符数量导致问题的原因
- (1)字数较少时正常的原因
- (2)字数较多时出现问题的原因
- 4. POST 请求与 multipart/form-data 的兼容性问题
- 5. 表单提交方法的影响
- (1) 表单自动提交（$("#applyaddfm").submit();）
- (2) 手动提交（httpPost 函数）
- 6. 解决方案
- (1) 移除 enctype="multipart/form-data"（适用于无文件上传）
- (2) 使用 fetch 或 XMLHttpRequest 提交数据
- (3) 调整后端解析逻辑
- 6.后端（JVAV）设置处理 multipart/form-data 请求的方法：
- 使用 Servlet 3.0：在 web.xml 中配置 MultipartConfig：
- 示例代码：
- 关键点：
- 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 的数据格式较为复杂，可能会导致后端解析失败或路径匹配错误。
- 适用场景：用于文件上传。当表单中包含<form name="fm" id="applyaddfm" method="post" onsubmit="queryWait()">
</form>时，必须将 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 编码方式：- <form name="fm" id="applyaddfm" method="post" onsubmit="queryWait()">
-
- </form>
使用现代 AJAX 方法（如 fetch）提交数据，灵活控制请求格式：- fetch('${ctx}/lossAndDuty/car_query.do', {<form name="fm" id="applyaddfm" method="post" onsubmit="queryWait()">
-
- </form>method: 'POST',<form name="fm" id="applyaddfm" method="post" onsubmit="queryWait()">
-
- </form>headers: {<form name="fm" id="applyaddfm" method="post" onsubmit="queryWait()">
-
- </form><form name="fm" id="applyaddfm" method="post" onsubmit="queryWait()">
-
- </form>'Content-Type': 'application/x-www-form-urlencoded'<form name="fm" id="applyaddfm" method="post" onsubmit="queryWait()">
-
- </form>},<form name="fm" id="applyaddfm" method="post" onsubmit="queryWait()">
-
- </form>body: new URLSearchParams($("#applyaddfm").serialize())}).then(response => response.json()).then(data => console.log(data));
- 增加请求体大小限制：确保后端能处理较大的 multipart/form-data 请求。
- 优化路径匹配逻辑：确保路径匹配不受数据量影响。
6.后端（JVAV）设置处理 multipart/form-data 请求的方法：
使用 Servlet 3.0：在 web.xml 中配置 MultipartConfig：
- <form name="fm" id="applyaddfm" method="post" onsubmit="queryWait()">
-
- </form><form name="fm" id="applyaddfm" method="post" onsubmit="queryWait()">
-
- </form><form name="fm" id="applyaddfm" method="post" onsubmit="queryWait()">
-
- </form>default<form name="fm" id="applyaddfm" method="post" onsubmit="queryWait()">
-
- </form><form name="fm" id="applyaddfm" method="post" onsubmit="queryWait()">
-
- </form>/<form name="fm" id="applyaddfm" method="post" onsubmit="queryWait()">
-
- </form><form name="fm" id="applyaddfm" method="post" onsubmit="queryWait()">
-
- </form><form name="fm" id="applyaddfm" method="post" onsubmit="queryWait()">
-
- </form><form name="fm" id="applyaddfm" method="post" onsubmit="queryWait()">
-
- </form>10485760<form name="fm" id="applyaddfm" method="post" onsubmit="queryWait()">
-
- </form><form name="fm" id="applyaddfm" method="post" onsubmit="queryWait()">
-
- </form> 10485760<form name="fm" id="applyaddfm" method="post" onsubmit="queryWait()">
-
- </form><form name="fm" id="applyaddfm" method="post" onsubmit="queryWait()">
-
- </form>0<form name="fm" id="applyaddfm" method="post" onsubmit="queryWait()">
-
- </form>
关键点：
- ServletFileUpload：用于解析 multipart/form-data 请求。
- item.write()：将文件保存到指定路径。
7. 总结
表单文本框内容过多导致 404 错误，通常是由于 multipart/form-data 的复杂性引发的路径截断或后端解析失败。通过移除 enctype、使用现代 AJAX 方法或调整后端逻辑，可以有效解决该问题。
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！ |
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
照妖镜
