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

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

HTML:

这将打印表单字段值。很好用

但是，

HTML:

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"));

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

---

我做错什么了吗？

我想我找到了它为什么会这样做。当我使用

action

属性提交表单数据时，我没有设置

enctype

属性。因此，当我提交表单时，内容类型是

application/x-www-form-urlencoded

。当我使用javascript发送它时，内容类型被设置为

multipart/formdata；边界=----WebKitFormBoundaryfxmNAuz7ZhhuUcZn

我环顾四周，发现如果内容类型不是

application/x-www-form-urlencoded

，request.getParameter（）将返回null。所以，这就是为什么我得到这些空值

有用的帖子

---

更改xhr.open（“POST”、“./myapi/submitRequest”，true）；到xhr.open（“POST”，“/myapi/submitRequest”，true）；。。当您放弃时，将被视为url的一部分javascript@deepakthomas那是故意的。如果我不这样做，我会得到一个404错误代码，网络请求会显示什么？？当你点击提交按钮时，你的页面是否会刷新？因为你没有任何代码来阻止它？

<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>

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);

});

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