console.log나는를 사용하여 그것을 시도 하고 반복했다 for in.

여기 에 FormData에 대한 MDN 참조 가 있습니다.

두 시도 모두이 바이올린에 있습니다.

var fd = new FormData(),
    key;

// poulate with dummy data
fd.append("key1", "alskdjflasj");
fd.append("key2", "alskdjflasj");

// does not do anything useful
console.log(fd);

// does not do anything useful   
for(key in fd) {
    console.log(key);
}

어떤 키가 설정되어 있는지 양식 데이터를 검사하는 방법

답변

업데이트 된 방법 :

2016 년 3 월 현재 최신 버전의 Chrome 및 Firefox는 이제 FormData.entries()FormData 검사를 지원 합니다. 소스 .

// Create a test FormData object
var formData = new FormData();
formData.append('key1', 'value1');
formData.append('key2', 'value2');

// Display the key/value pairs
for (var pair of formData.entries()) {
    console.log(pair[0]+ ', ' + pair[1]);
}

이것을 지적 해 주신 Ghost Echo 와 rloth 에게 감사드립니다 !

기존 답변 :

이 Mozilla 기사를 살펴본 후 FormData 객체에서 데이터를 가져올 수있는 방법이없는 것 같습니다. AJAX 요청을 통해 전송할 FormData를 빌드하는 데만 사용할 수 있습니다.

나는 또한 같은 질문을하는이 질문을 발견했다 : FormData.append ( “key”, “value”) is not working .

이 문제를 해결하는 한 가지 방법은 일반 사전을 작성한 다음 FormData로 변환하는 것입니다.

var myFormData = {
    key1: 300,
    key2: 'hello world'
};

var fd = new FormData();
for (var key in myFormData) {
    console.log(key, myFormData[key]);
    fd.append(key, myFormData[key]);
}

일반 FormData 오브젝트를 디버그하려는 경우 네트워크 요청 콘솔에서 검사하기 위해 전송할 수도 있습니다.

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

답변

짧은 답변

console.log(...fd)

더 긴 답변

raw body가 어떻게 보이는지 검사하려면 Response 생성자 (fetch API의 일부)를 사용할 수 있습니다

var fd = new FormData

fd.append("key1", "value1")
fd.append("key2", "value2")

new Response(fd).text().then(console.log)

스 니펫 확장

일부 항목은 각 항목 항목을 기록하도록 제안하지만 console.log여러 인수
console.log(foo, bar)
를 사용할 수도 있습니다. 여러 인수 를 사용하려면 apply메소드를 사용하여 다음 과 같이 호출 할 수 있습니다 console.log.apply(console, array).
그러나 스프레드 연산자 와 반복자를 사용 하여 인수를 적용하는 새로운 ES6 방법이 있습니다
console.log(...array).

이를 아는, 그리고 FormData 두 배열의가있다는 사실 Symbol.iterator그 위에 루프를 가진, 또는 전화없이 그냥 간단하게이 작업을 수행 할 수있는 그것의 프로토 타입 방법 .entries()반복자의 보류를 얻을 수를

var fd = new FormData

fd.append("key1", "value1")
fd.append("key2", "value2")

console.log(...fd)

스 니펫 확장

답변

나는 formData.entries()방법을 사용한다 . 모든 브라우저 지원에 대해 잘 모르겠지만 Firefox에서는 제대로 작동합니다.

https://developer.mozilla.org/en-US/docs/Web/API/FormData/entries 에서 가져옴

// Create a test FormData object
var formData = new FormData();
formData.append('key1','value1');
formData.append('key2','value2');

// Display the key/value pairs
for (var pair of formData.entries())
{
 console.log(pair[0]+ ', '+ pair[1]);
}

이 또한 formData.get()및 formData.getAll()넓은 브라우저를 지원하지만, 단지 값이 아닌 키를 가지고. 자세한 내용은 링크를 참조하십시오.

답변

어떤 경우에는 다음을 사용합니다.

for(var pair of formData.entries(){...

불가능하다.

이 코드를 대신 사용했습니다.

var outputLog = {}, iterator = myFormData.entries(), end = false;
while(end == false) {
   var item = iterator.next();
   if(item.value!=undefined) {
       outputLog[item.value[0]] = item.value[1];
   } else if(item.done==true) {
       end = true;
   }
    }
console.log(outputLog);

매우 똑똑한 코드는 아니지만 작동합니다 …

도움이 되길 바랍니다.

답변

Angular 5+ (TypeScript 2.4.2 사용)에서 작업 할 때 다음과 같이 시도했지만 정적 검사 오류를 제외하고 작동하지만 for(var pair of formData.entries())작동하지 않습니다.

formData.forEach((value,key) => {
      console.log(key+" "+value)
});

코드 스 니펫 표시

var formData = new FormData();
formData.append('key1', 'value1');
formData.append('key2', 'value2');

formData.forEach((value,key) => {
  console.log(key+" "+value)
});

스 니펫 확장

Stackblitz에서 확인

답변

쉬운 방법

각도 8 에서이 코드를 사용했습니다.

var formData = new FormData();
formData.append('key1', 'value1');
formData.append('key2', 'value2');

 formData.forEach((value,key) => {
    console.log(key+value)
     });

답변

ES6 + 솔루션 :

양식 데이터의 구조를 보려면

console.log([...formData])

각 키-값 쌍을 보려면

for (let [key, value] of formData.entries()) {
  console.log(key, ':', value);
}