我正在通过 XMLHttpRequest
发送一个POST请求,其中包含HTML表单中输入的数据。如果没有JavaScript的干扰,该表单会将其数据作为application/x-www-form-urlencoded
进行编码并提交。
使用XMLHttpRequest,我希望使用FormData
API发送数据,但它不起作用,因为它将数据视为multipart/form-data
进行编码。因此,我需要将数据适当转义后以查询字符串的形式写入XMLHttpRequest
的send方法中。
addEntryForm.addEventListener('submit', function(event) {
// Gather form data
var formData = new FormData(this);
// Array to store the stringified and encoded key-value-pairs.
var parameters = []
for (var pair of formData.entries()) {
parameters.push(
encodeURIComponent(pair[0]) + '=' +
encodeURIComponent(pair[1])
);
}
var httpRequest = new XMLHttpRequest();
httpRequest.open(form.method, form.action);
httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
httpRequest.onreadystatechange = function() {
if (httpRequest.readyState === XMLHttpRequest.DONE) {
if (httpRequest.status === 200) {
console.log('Successfully submitted the request');
} else {
console.log('Error while submitting the request');
}
}
};
httpRequest.send(parameters.join('&'));
// Prevent submitting the form via regular request
event.preventDefault();
});
现在整个使用 for ... of
循环等的方式似乎有些复杂。是否有一种更简单的方法将 FormData
转换为查询字符串?或者我是否可以以不同的编码方式发送 FormData
?