使用 action 属性提交表单与使用 XMLHttpRequest 发送表单数据有何不同？答案

【问题标题】：How does submitting form using action attribute differ from sending form data using XMLHttpRequest?使用 action 属性提交表单与使用 XMLHttpRequest 发送表单数据有何不同？
【发布时间】：2021-02-01 05:24:56
【问题描述】：

我正在尝试使用 XMLHttpRequest 提交我的表单值。

HTML：

<form id="form" method="post" action="../myapi/submitRequest">
    <input type="text" name="type" placeholder="Type">
    <input type="text" name="eventDate" placeholder="Date">
    <input type="text" name="amount" placeholder="Amount">
    <input type="file" name="reciept">
    <input type="submit">
</form>

Java 中的某个地方：

System.out.println(request.getParameter("type"));
System.out.println(request.getParameter("eventDate"));
System.out.println(request.getParameter("amount"));
System.out.println(request.getParameter("reciept"));

这将打印表单字段值。完美运行！

但是，

HTML：

<form id="form">
    <input type="text" name="type" placeholder="Type">
    <input type="text" name="eventDate" placeholder="Date">
    <input type="text" name="amount" placeholder="Amount">
    <input type="file" name="reciept">
    <input type="submit">
</form>

JavaScript：

const form = document.getElementById("form");

form.addEventListener('submit',function(event){

    let xhr = new XMLHttpRequest();
    xhr.open("POST","../myapi/submitRequest",true);

    let fd = new FormData(form);

    xhr.send(fd);

});

Java 中的某个地方：

System.out.println(request.getParameter("type"));
System.out.println(request.getParameter("eventDate"));
System.out.println(request.getParameter("amount"));
System.out.println(request.getParameter("reciept"));

当我这样做时，我得到所有参数值的 null。

我做错了吗？

【问题讨论】：

更改 xhr.open("POST","../myapi/submitRequest",true);到 xhr.open("POST","/myapi/submitRequest",true);
.. 当您输入 javascript 时，会被视为 url 的一部分
@deepakthomas 这是故意的。如果我不这样做，我会收到 404 错误代码
网络请求显示什么？？是否有payload中的参数
点击提交按钮时页面是否刷新？因为您没有任何代码可以防止这种情况发生？

标签： javascript java ajax forms xmlhttprequest

【解决方案1】：

我想我发现了它为什么会这样。当我使用action 属性提交表单数据时，我没有设置enctype 属性。所以，当我提交表单时，内容类型是application/x-www-form-urlencoded。当我使用 javascript 发送它时，内容类型设置为multipart/form-data; boundary=----WebKitFormBoundaryfxmNAuz7ZhhuUcZn。

我环顾四周，发现如果内容类型不是application/x-www-form-urlencoded，request.getParameter() 将返回 null。所以，这就是我得到那些空值的原因！

有用的帖子

Convenient way to parse incoming multipart/form-data parameters in a Servlet

【讨论】：