Form Data 검사 방법

Form Data 검사 방법

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);
}

어떤 키가 설정되어 있는지 확인하기 위해 양식 데이터를 검사하려면 어떻게 해야 합니다.

갱신된 방법:

의 Chrome 및 Firefox는 3월 Chrome firefox 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]); 
}

이걸 지적해준 고스트 에코와 릴로스 덕분이야!

오래된 답변:

이러한 Mozilla 문서를 보면 FormData 개체에서 데이터를 가져올 방법이 없는 것 같습니다.AJAX 요청을 통해 전송할 FormData 구축에만 사용할 수 있습니다.

저도 방금 같은 질문을 하나 찾았어요FormData.append("key", "value")가 작동하지 않습니다.

이 문제를 해결하는 한 가지 방법은 일반 사전을 작성한 후 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);

짧은 답변이 적다

[...fd] // shortest devtool solution
console.log(...fd) // shortest script solution
console.log([...fd]) // Think 2D array makes it more readable
console.table([...fd]) // could use console.table if you like that
console.log(Object.fromEntries(fd)) // Works if all fields are uniq
console.table(Object.fromEntries(fd)) // another representation in table form
new Response(fd).text().then(console.log) // To see the entire raw body

더 긴 답변

다른 은 각각의 합니다.entry of fd.entries() ,는console.log도 있습니다.
console.log(foo, bar, ...)
의 수의 하려면 , 「」를 할 수 있습니다.apply 즉 , 방법, '방법'이라고 .console.log.apply(console, array).
그러나 확산 연산자와 반복 연산자를 사용하여 인수를 적용하는 새로운 ES6 방법이 있습니다.
console.log(...array).

그리고 FormData와 어레이의 프로토타입에 Symbol.iterator 메서드가 포함되어 있기 때문에...of loop의 디폴트를 지정할 수 있습니다.그러면 인수를 전개할 수 있습니다....iterable할 formData.entries()에) method(메서드)로 하면 .for (x of formData) 편이 좋으시다면

var fd = new FormData()

fd.append('key1', 'value1')
fd.append('key2', 'value2')
fd.append('key2', 'value3')

// using it's default for...of specified by Symbol.iterator
// Same as calling `fd.entries()`
for (let [key, value] of fd) {
  console.log(`${key}: ${value}`)
}

// also using it's default for...of specified by Symbol.iterator    
console.log(...fd)

console.table([...fd]) // Only beeing shown in console devtool

// Don't work in IE (use last pair if same key is used more)
console.log(Object.fromEntries(fd))

raw body가 어떻게 생겼는지 검사하고 싶을 경우 Response Constructor(fetch API의 일부)를 사용하면 폼 데이터를 업로드할 때 실제 폼 데이터로 변환할 수 있습니다.

var fd = new FormData()

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

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

용 the the the를 .formData.entries()의 모든 확실한 Firefox에서는 합니다.모든 브라우저가 지원되는지는 모르겠지만 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]); 
}

, there있있 there 도 있다.formData.get() ★★★★★★★★★★★★★★★★★」formData.getAll()브라우저 지원 범위가 넓어지지만 키는 표시되지 않고 값만 표시됩니다.자세한 내용은 링크를 참조하십시오.

ES6+ 솔루션:

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

console.log([...formData])

각 키와 값의 쌍을 표시하려면:

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

각진

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

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

5 22 때 Angular 5(TypeScript 2.4.2 사용)도 동작합니다.for(var pair of formData.entries())동작하지 않습니다.

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)
     });

경우에 따라서는, 의 사용법:

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);

똑똑한 암호는 아니지만 작동은 해...

도움이 됐으면 좋겠다.

Array.from()을 사용할 수 있습니다.

console.log(Array.from(formData.entries()))

typeScriptangular 6이 코드는 나에게 유효합니다.

var formData = new FormData();
formData.append('name', 'value1');
formData.append('name', 'value2');
console.log(formData.get('name')); // this is return first element value.

또는 모든 값에 대해:

console.log(formData.getAll('name')); // return all values

다음은 FormData 객체의 엔트리를 객체로 콘솔에 기록하는 기능입니다.

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);
};

에 관한 MDN .entries()

에 관한 MDN .next() ★★★★★★★★★★★★★★★★★」.done

  function abc(){ 
    var form = $('#form_name')[0]; 
        var formData = new FormData(form);
        for (var [key, value] of formData.entries()) { 
            console.log(key, value);
        }
        $.ajax({
            type: "POST",
            url: " ",
            data:  formData,
            contentType: false,
            cache: false,
            processData:false,
            beforeSend: function() {

            },
            success: function(data) {


            },

       });
}

요.FormData::entries() 、 の of of of of of of of of of of of의 합니다.Iterator.

다음 형식을 사용합니다.

<form name="test" id="form-id">
    <label for="name">Name</label>
    <input name="name" id="name" type="text">
    <label for="pass">Password</label>
    <input name="pass" id="pass" type="text">
</form>

그리고 이 JS-루프:

<script>
    var it = new FormData( document.getElementById('form-id') ).entries();
    var current = {};
    while ( ! current.done ) {
        current = it.next();
        console.info( current )
    }
</script>

angular 7에서 나는 아래 코드 줄을 사용하여 콘솔에 엔트리를 얻었다.

formData.forEach(entries => console.log(entries));

이미 응답했습니다만, 송신된 폼으로부터 간단하게 값을 취득하고 싶은 경우는, 새로운 맵 반복 가능 작성과 조합한 스프레드 연산자를 사용하면, 좋은 구조를 얻을 수 있습니다.

new Map([...new FormData(form)])

MDN은 다음 형식을 제안합니다.

let formData = new FormData();
formData.append('name', 'Alex Johnson')
for(let keyValuePair of formData.entries()){
    console.log(keyValuePair); //has form ['name','Alex Johnson']
}

또는

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

브라우저 또는 환경이 최신 JavaScript 및 FormData API를 지원하지 않는 경우 ES+ 폴리필을 추가하는 것을 고려해 보십시오.

이게 도움이 됐으면 좋겠어요.

다음 기능을 사용해 보십시오.

function formDataToObject(formData) {
  return Array.from(formData.entries()).reduce((old, pair) => ({
    ...old,
    [pair[0]]: pair[1],
  }), {});
}

폼 데이터

var formData = new FormData(); // Currently empty
formData.append('username', 'Chris');

for (var key of formData.keys()) {
   console.log(key);
}

for (var value of formData.values()) {
   console.log(value);
}

더 잘 알고 있다

스크립트를 사용하고 는, 「」를 콘솔 할 수 .FormData음음음같 뭇매하다

const productData = new FormData();
productData.append('name', name);
productData.append('description', description);
productData.forEach((key,value)=>{
   console.log(key, value)})

다음과 같은 객체에 매핑합니다.

let debug_form_data = {}
form_data.forEach((value,key)=> debug_form_data[key]=value)
console.debug(debug_form_data)

ECMAScript 5 호환 버전에 대한 @2540625 응답에 기반하여...

// NOTE: Inspect a HTML request data ("FormData"). By Questor
function inspRqstData(rqstData) {
    var dataEntries = rqstData.entries();
    var rqstDataAsJO = {};
    var dataNext;
    var dataPair;
    while ((dataNext = dataEntries.next() || true) && dataNext.done === false) {
        dataPair = dataNext.value;
        console.log(dataPair[0], dataPair[1]);
    }
}

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

메모: "FormData"는 "ECMAScript 5" JavaScript 지원을 포함하는 것일 수 있습니다.이것은, 이러한 레퍼런스내의 브라우저의 서포트/호환성에 관한 정보를 크로스 하는 것으로 추측할 수 있습니다(IE10 참조).

https://www.w3schools.com/js/js_es5.asp
https://developer.mozilla.org/en-US/docs/Web/API/FormData/FormData#browser_compatibility

---

추가: HTML 요청 데이터("FormData")를 단순한 JavaScript 개체로 변환...

// NOTE: Convert a HTML request data ("FormData") to a JavaScript Object. By Questor
function rqstDataToJO(rqstData) {
    var dataEntries = rqstData.entries();
    var rqstDataAsJO = {};
    var dataNext;
    var dataPair;
    while ((dataNext = dataEntries.next() || true) && dataNext.done === false) {
        dataPair = dataNext.value;
        rqstDataAsJO[dataPair[0]] = dataPair[1];
    }
    return rqstDataAsJO;
}

var rqstData = new FormData();
rqstData.append("key1", "value1");
rqstData.append("key2", "value2");
var rqstDataAsJO = rqstDataToJO(rqstData);
console.log(rqstDataAsJO.key1)
console.log(rqstDataAsJO.key1)

감사합니다! =D

기타 참조...

https://developer.mozilla.org/en-US/docs/Web/API/FormData/entries
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for.../

formData.entries()가 최신 버전에서 오류를 발생시키고 있습니다.따라서 다음과 같이 시도할 수 있습니다.

formData.forEach((value: FormDataEntryValue, key: string) => {
      console.log(value, key);
    })

console.log(myformdata.get("mykey");

그게 정답인 것 같아! 그리고 'getall'을 그렇게 쓰면 돼.

console.log(myformdata.getall());

언급URL : https://stackoverflow.com/questions/17066875/how-to-inspect-formdata