我有一个 FormData 对象，我在
javascriptHTMLFormDatavar form = new FormData(document.getElementById("form"));
我的问题
如何在发送之前访问这个
FormDataform.nameform.name似乎您无法使用
FormData对象让你编译一组键/值对发送 使用 XMLHttpRequest。 主要用于发送表格 数据，但可以独立于表格使用以传输 键控数据。 传输的数据与表单的格式相同 如果表单的编码类型，则 submit() 方法将用于发送数据 被设置为“multipart/form-data”。FormData
但是您可以使用像这样的简单 Javascript 实现它
var formElements = document.forms['myform'].elements['inputTypeName'].value;
首先，我认为不可能按照您指定的方式从表单构建 FormData 对象，并使用已接受答案中描述的方法从表单获取值——这更像是一个附录！
看起来你可以从 FormData 对象中获取一些数据：
var formData = new FormData();
formData.append("email", "[email protected]");
formData.append("email", "[email protected]");
formData.get("email");
这只会返回该键的first项目，在这种情况下它将返回'[email protected]'，使用下面的代码获取所有电子邮件地址
formData.getAll("email")
另请参阅：关于表单数据获取方法的 MDN 文章.
FormData.get 将在一小部分浏览器中执行您想要的操作 - 查看浏览器兼容性图表以查看哪些浏览器（目前只有 Chrome 50+ 和 Firefox 39+）。鉴于这种形式：
<form id="form">
<input name="inputTypeName">
</form>
您可以通过
访问该输入的值var form = new FormData(document.getElementById("form"));
var inputValue = form.get("inputTypeName");
根据MDN：
实现 FormData 的对象可以直接用于 for...of 结构，而不是 entries(): for (var p of myFormData) 是 相当于 for (var p of myFormData.entries())
因此您可以像这样访问 FormData 值：
var formData = new FormData(myForm);
for (var p of formData) {
let name = p[0];
let value = p[1];
console.log(name, value)
}
这是一个从 FormData 中检索键值对的解决方案：
var data = new FormData( document.getElementById('form') );
data = data.entries();
var obj = data.next();
var retrieved = {};
while(undefined !== obj.value) {
retrieved[obj.value[0]] = obj.value[1];
obj = data.next();
}
console.log('retrieved: ',retrieved);
只需添加到@Jeff Daze 的先前解决方案 - 您可以使用
FormData.getAll("key name")我的解决方案
for-ofconst formData = new FormData(document.getElementById('form'))
for (const [key, value] of formData) {
console.log('»', key, value)
}
它会起作用
let form = document.querySelector("form");
let data = new FormData(form)
formObj = {};
for (var pair of data.entries()) {
formObj[pair[0]] = pair[1]
}
console.log(formObj)如果你想做的是获取 FormData 的内容或附加到它，这就是你应该使用的：
假设您想上传这样的图片：
<input type="file" name="image data" onChange={e =>
uploadPic(e)} />
关于更改处理函数：
const handleChange = e => {
// Create a test FormData object since that's what is needed to save image in server
let formData = new FormData();
//adds data to the form object
formData.append('imageName', new Date.now());
formData.append('imageData', e.target.files[0]);
}
append：向创建的 formData 对象添加一个条目，其中 imageData 是键，e.target.files[0] 是属性
您现在可以将包含图像数据的 imageData 对象发送到您的服务器进行处理
但是要确认这个 formData 是否有值，一个简单的 console.log(formData)/ 不会这样做，你应该做的是：
//don't forget to add this code to your on change handler
function
for (var value of formData.values()) {
console.log(value);
}
//我希望这能解释我的答案，它适用于 vanilla JavaScript 和 React.js ...提前感谢您的支持
另一个解决方案：
HTML:
<form>
<input name="searchtext" type="search" >'
<input name="searchbtn" type="submit" value="" class="sb" >
</form>
JS:
$('.sb').click( function() {
var myvar=document.querySelector('[name="searchtext"]').value;
console.log("Variable value: " + myvar);
});
使用 runarberg/formsquare 库 (
npm i --save formsquareimport formsquare from "formsquare";
const valuesObject = formsquare.filter((el) => !el.disabled).parse(document.getElementById('myForm'));
//=> {"foo": "bar"}
您可以使用 get() 方法。 它返回指定键的第一次出现。
例如，您有：
var form = new FormData(document.getElementById("form"));
您可以通过以下方式获得钥匙：
form.get('key_name');
更多细节在这里：https://developer.mozilla.org/en-US/docs/Web/API/FormData/get