1. ホーム
  2. javascript

[解決済み] FormData.append("key", "value") が動作しない。

2022-09-26 01:51:14

質問

これのどこが悪いのか、教えてください。

var formdata = new FormData();
formdata.append("key", "value");
console.log(formdata);

私の出力は次のようになります。quot;key" - "value"のペアを見つけることができません。

FormData
*__proto__: FormData
**append: function append() { [native code] }
***arguments: null
***caller: null
***length: 0
***name: "append"
***prototype: append
***__proto__: function Empty() {}
*constructor: function FormData() { [native code] }
**arguments: null
**caller: null
**length: 0
**name: "FormData"
**prototype: FormData
**toString: function toString() { [native code] }
*__proto__: Object
**__proto__: Object
**__defineGetter__: function __defineGetter__() { [native code] }
**__defineSetter__: function __defineSetter__() { [native code] }
**__lookupGetter__: function __lookupGetter__() { [native code] }
**__lookupSetter__: function __lookupSetter__() { [native code] }
**constructor: function Object() { [native code] }
**hasOwnProperty: function hasOwnProperty() { [native code] }
**isPrototypeOf: function isPrototypeOf() { [native code] }
**propertyIsEnumerable: function propertyIsEnumerable() { [native code] }
**toLocaleString: function toLocaleString() { [native code] }
**toString: function toString() { [native code] }
**valueOf: function valueOf() { [native code] }

理解不能です! 昨日はとてもうまくいっていたのに、今日は頭がキーボードを何度もクラッシュさせた! Firefox、Chrome、どちらも同じです :/。

どのように解決するのですか?

Chrome 50+ と Firefox 39+ (resp. 44+) で新しく導入されました。

  • formdata.entries() (この場合 Array.from() を組み合わせることでデバッグしやすくなります。)
  • formdata.get(key)
  • など、とても便利なメソッドがあります。

オリジナルの回答です。

私が通常「デバッグ」するために行うことは FormData オブジェクトを送信し、ブラウザのログをチェックすることです(例:Chrome devtoolsのネットワークタブ)。

同じAjaxフレームワークが必要なわけではありません。どんな詳細も必要ありません。ただ、それを送信してください。

var xhr = new XMLHttpRequest;
xhr.open('POST', '/', true);
xhr.send(data);

簡単です。