I wanna bring FormData to Console to check key and value.
var f = new FormData();
f.append('key1', 'value1');
console.log(f);
f = new FormData();
console.log(f); // I wanna know: Does f keep the key `key1` and value `value1`?
When I check in console, nowhere I can see the key and the value.
Can you give me some tip?
If you're using firefox you can send an ajax request and check in the Network monitor the parameters of your request
Here is a screenshot :
Or you can easily print_r($_POST) or $_GET if you are using php .
An approach utilizing Web Workers API , FormData.entries() ; see also Using Web Workers
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>MDN Example - Embedded worker</title>
<script type="text/js-worker">
// This script WON'T be parsed by JS engines
// because its mime-type is text/js-worker.
// var myVar = "Hello World!";
var key = "key1";
var value = "value1";
// myVar.append('key1', 'value1');
// Rest of your worker code goes here.
</script>
<script type="text/javascript">
// This script WILL be parsed by JS engines
// because its mime-type is text/javascript.
function pageLog (sMsg) {
// Use a fragment: browser will only render/reflow once.
var oFragm = document.createDocumentFragment();
oFragm.appendChild(document.createTextNode(sMsg));
oFragm.appendChild(document.createElement("br"));
document.querySelector("#logDisplay").appendChild(oFragm);
}
</script>
<script type="text/js-worker">
// This script WON'T be parsed by JS engines
// because its mime-type is text/js-worker.
onmessage = function (oEvent) {
var f = new FormData();
f.append(key, value);
for(var pair of f.entries()) {
postMessage(pair[0] + ", " + pair[1]);
}
};
// Rest of your worker code goes here.
</script>
<script type="text/javascript">
// This script WILL be parsed by JS engines
// because its mime-type is text/javascript.
// In the past...:
// blob builder existed
// ...but now we use Blob...:
var blob = new Blob(
Array.prototype
.map.call(
document.querySelectorAll("script[type=\"text\/js-worker\"]")
, function (oScript) { return oScript.textContent; })
, {type: "text/javascript"});
// Creating a new document.worker property
// containing all our "text/js-worker" scripts.
document.worker = new Worker(window.URL.createObjectURL(blob));
document.worker.onmessage = function (oEvent) {
pageLog("Received: " + oEvent.data);
};
// Start the worker.
window.onload = function() { document.worker.postMessage(""); };
</script>
</head>
<body><div id="logDisplay"></div></body>
</html>
// Log entries of a FormData object to the console as an object.
export const logFormData = (formData) => {
const entries = formData.entries();
const result = {};
let next;
let pair;
while ((next = entries.next()) && next.done === false) {
pair = next.value;
result[pair[0]] = pair[1];
}
console.log(result);
};
