英文:
How does submitting form using action attribute differ from sending form data using XMLHttpRequest?
问题
我正在尝试使用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。
我做错了什么吗？
英文:
I am trying to submit my form values using 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>
Somewhere in 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"));
This prints the form fields value. Works perfectly!
But,
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);
});
Somewhere in 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"));
When I do this, I get null for all parameter values.
Am I doing something wrong?
答案1
得分: 1
我想我找到了为什么它会这样行为的原因。当我使用action属性提交表单数据时，我没有设置enctype属性。因此，当我提交表单时，内容类型是application/x-www-form-urlencoded。而当我使用JavaScript发送时，内容类型被设置为multipart/form-data; boundary=----WebKitFormBoundaryfxmNAuz7ZhhuUcZn。
我查找了一下，发现如果内容类型不是application/x-www-form-urlencoded，request.getParameter()将返回null。所以，这就是为什么我得到那些空值的原因！
有用的帖子
英文:
I think I found out why it was acting this way. When I was submitting the form data using the action attribute, I did not set the enctype attribute. So, when I was submitting the form, the content type was application/x-www-form-urlencoded. And when I was sending it using javascript, the content type was set to multipart/form-data; boundary=----WebKitFormBoundaryfxmNAuz7ZhhuUcZn.
I looked around and found out that request.getParameter() will return null if the content-type is not application/x-www-form-urlencoded. So, that was why I was getting those null values!
Helpful Posts
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论