복붙노트

[JQUERY] 어떻게 자바 스크립트 / jQuery를 함께 양식 데이터를받을 수 있나요?

JQUERY

어떻게 자바 스크립트 / jQuery를 함께 양식 데이터를받을 수 있나요?

해결법

  1. 1.

    $('form').serialize() //this produces: "foo=1&bar=xxx&this=hi"

    데모

  2. 2.사용 $ ( '양식') serializeArray () 배열을 반환합니다. :

    사용 $ ( '양식') serializeArray () 배열을 반환합니다. :

    [
  {"name":"foo","value":"1"},
  {"name":"bar","value":"xxx"},
  {"name":"this","value":"hi"}
]

    다른 옵션은 ( '양식') $입니다 문자열을 반환 직렬화 (),. :

    "foo=1&bar=xxx&this=hi"

    이 jsfiddle 데모를 살펴 보자

  3. 3.2014 년 대답을 업데이트 : HTML5 FormData이 작업을 수행합니다

    2014 년 대답을 업데이트 : HTML5 FormData이 작업을 수행합니다

    var formData = new FormData(document.querySelector('form'))

    이 양식에 사용 된 모든 이름과 값을 포함 - 당신은 그것이 그대로 formData을 게시 할 수 있습니다.

  4. 4.jQuery.serializeArray을 바탕으로, 키 - 값 쌍을 반환합니다.

    jQuery.serializeArray을 바탕으로, 키 - 값 쌍을 반환합니다.

    var data = $('#form').serializeArray().reduce(function(obj, item) {
    obj[item.name] = item.value;
    return obj;
}, {});

  5. 5.

    document.querySelector('form').addEventListener('submit', (e) => {
  const formData = new FormData(e.target);
  // Now you can use formData.get('foo'), for example.
  // Don't forget e.preventDefault() if you want to stop normal form .submission
});

    이것은 nitpicky 대답이지만,이 더 나은 솔루션입니다 이유를 설명해 보자 :

  6. 6.그것은 2019이며,이 할 수있는 더 좋은 방법이있다 :

    그것은 2019이며,이 할 수있는 더 좋은 방법이있다 :

    const form = document.querySelector('form');
const data = new URLSearchParams(new FormData(form).entries());

    나 대신 일반 객체를 원하는 경우

    const form = document.querySelector('form');
const data = Object.fromEntries(new FormData(form).entries());

    참고 있지만 당신 같은 중복 키이하지 않습니다 작업에서 얻을 다중 선택하고 동일한 이름을 가진 중복 체크 박스.

  7. 7.사용 .serializeArray ()는 배열 형식의 데이터를 가져온 다음 객체로 변환합니다 :

    사용 .serializeArray ()는 배열 형식의 데이터를 가져온 다음 객체로 변환합니다 :

    function getFormObj(formId) {
    var formObj = {};
    var inputs = $('#'+formId).serializeArray();
    $.each(inputs, function (i, input) {
        formObj[input.name] = input.value;
    });
    return formObj;
}

  8. 8.여기에서도 jQuery를 필요로하지 않습니다 정말 간단하고 짧은 soluton입니다.

    여기에서도 jQuery를 필요로하지 않습니다 정말 간단하고 짧은 soluton입니다.

    var formElements=document.getElementById("myForm").elements;    
var postData={};
for (var i=0; i<formElements.length; i++)
    if (formElements[i].type!="submit")//we dont want to include the submit-buttom
        postData[formElements[i].name]=formElements[i].value;

  9. 9.나는 이것을 사용

    나는 이것을 사용

    jQuery를 플러그인

    (function($){
  $.fn.getFormData = function(){
    var data = {};
    var dataArray = $(this).serializeArray();
    for(var i=0;i<dataArray.length;i++){
      data[dataArray[i].name] = dataArray[i].value;
    }
    return data;
  }
})(jQuery);

    HTML 양식

    <form id='myform'>
  <input name='myVar1' />
  <input name='myVar2' />
</form>

    데이터를 가져 오기

    var myData = $("#myForm").getFormData();

  10. 10.

    $("#form input, #form select, #form textarea").each(function() {
 data[theFieldName] = theFieldValue;
});

    이외, 당신은 () 직렬화를보고 할 수 있습니다;

  11. 11.여기에 제대로 체크 박스, 라디오 버튼, 슬라이더 처리하는 작업 자바 스크립트만을 구현 한 것입니다 (물론 아마 다른 입력 유형,하지만 난 단지 이것들을 테스트했습니다).

    여기에 제대로 체크 박스, 라디오 버튼, 슬라이더 처리하는 작업 자바 스크립트만을 구현 한 것입니다 (물론 아마 다른 입력 유형,하지만 난 단지 이것들을 테스트했습니다).

    function setOrPush(target, val) {
    var result = val;
    if (target) {
        result = [target];
        result.push(val);
    }
    return result;
}

function getFormResults(formElement) {
    var formElements = formElement.elements;
    var formParams = {};
    var i = 0;
    var elem = null;
    for (i = 0; i < formElements.length; i += 1) {
        elem = formElements[i];
        switch (elem.type) {
            case 'submit':
                break;
            case 'radio':
                if (elem.checked) {
                    formParams[elem.name] = elem.value;
                }
                break;
            case 'checkbox':
                if (elem.checked) {
                    formParams[elem.name] = setOrPush(formParams[elem.name], elem.value);
                }
                break;
            default:
                formParams[elem.name] = setOrPush(formParams[elem.name], elem.value);
        }
    }
    return formParams;
}

    함수 setOrPush (대상, 발) { VAR 결과 = 브로; 경우 (목표) { = [대상] 결과; (발) result.push; } 결과를 반환; } 함수 getFormResults (formElement) { var에 formElements = formElement.elements; var에 formParams = {}; 난 VAR = 0; VAR ELEM = NULL; 위한 (I = 0; I

    은? 무엇

    <= "a_0"레이블>를 < "A_1"레이블 => B < "A_2"= 레이블> C <= "a_3"레이블> D
    <= "a_13"에 대한 라벨>은? <옵션 값 = "0"> <옵션 값 = "1"> <옵션 값 = "2"> <옵션 값 = "3"> <옵션 값 = "4"> <옵션 값 = "5"> <옵션 값 = "6"> <옵션 값 = "7"> <옵션 값 = "8"> <옵션 값 = "9"> <옵션 값 = "10">

    A 및 / 또는 B

    <= "a_14"레이블>를 <레이블 = "a_15"> B < "BTN"버튼 식 TYPE = "제출"> OK

    좀 더 완벽하게 구현을 찾고 있다면, 그때이 만든 프로젝트의이 부분을 살펴. 내가 해낸 완벽한 솔루션 결국이 질문을 업데이 트됩니다,하지만 어쩌면이 사람에게 도움이 될 것입니다.

  12. 12.당신이 jQuery를 사용하는 경우, 여기 당신이 찾고있는 무엇을 할 것인가 약간의 기능입니다.

    당신이 jQuery를 사용하는 경우, 여기 당신이 찾고있는 무엇을 할 것인가 약간의 기능입니다.

    (이 페이지의 유일한 형태이다 않는 한 그냥 DOM 쿼리로 '형태'를 사용할 수 있습니다) 먼저, 양식에 ID를 추가

    <form id="some-form">
 <input type="radio" name="foo" value="1" checked="checked" />
 <input type="radio" name="foo" value="0" />
 <input name="bar" value="xxx" />
 <select name="this">
  <option value="hi" selected="selected">Hi</option>
  <option value="ho">Ho</option>
</form>

<script>
//read in a form's data and convert it to a key:value object
function getFormData(dom_query){
    var out = {};
    var s_data = $(dom_query).serializeArray();
    //transform into simple data/value object
    for(var i = 0; i<s_data.length; i++){
        var record = s_data[i];
        out[record.name] = record.value;
    }
    return out;
}

console.log(getFormData('#some-form'));
</script>

    출력은 같을 것이다 :

    {
 "foo": "1",
 "bar": "xxx",
 "this": "hi"
}

  13. 13.neuront의 응답에 기초하여 I는 키 - 값 쌍으로 폼 데이터를 얻을 수있는 간단한 방법을 JQuery와 생성하지만 = '예 [] 배열 이름 입력 다중 선택과 작동.

    neuront의 응답에 기초하여 I는 키 - 값 쌍으로 폼 데이터를 얻을 수있는 간단한 방법을 JQuery와 생성하지만 = '예 [] 배열 이름 입력 다중 선택과 작동.

    이것은 사용하는 방법입니다 :

    var form_data = $("#form").getFormObject();

    당신은 그것의 정의와 작동 방식의 아래 예를 찾을 수 있습니다.

    // 함수의 시작 $ .fn.getFormObject = 함수 () { VAR 개체 = $ (이) .serializeArray (). (기능 (OBJ, 항목을 감소) { VAR 이름 = item.name.replace ( "[]", ""); 경우 (대해서 typeof OBJ [이름]! == "미등록") { 만약 (! Array.isArray (OBJ [이름])) { OBJ [이름] = [OBJ [이름] item.value]; } 다른 { OBJ [이름] .push (item.value); } } 다른 { OBJ [이름]을 item.value =; } OBJ 반환; }, {}); 객체를 반환; } // 함수의 끝 //이 그것이 사용되는 방법입니다 $ ( "#으로 getObject"). 클릭 (함수 () { VAR form_data = $ ( "# 양식") getFormObject ().; CONSOLE.LOG (form_data); }); / * 만 더 잘 볼 수 있도록하기 위해) * / #getObject { 패딩 : 10px; 커서 : 포인터; 배경 : # 0098EE; 색상 : 흰색; 표시 : 인라인 블록; } <스크립트 SRC = "https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"> <형태 ID = "폼"> <선택 이름 = "다중 선택"여러> <옵션 이름 = "옵션 1"선택> 옵션 1 <옵션 이름 = "옵션 2"선택> 옵션 2

    오브젝트 (콘솔을 확인!) 가져 오기

  14. 14.또한 FormData 객체를 사용할 수 있습니다; FormData 객체는 XMLHttpRequest의를 사용하여 전송하는 키 / 값 쌍의 집합을 컴파일 할 수 있습니다. 그 형태는 주로 데이터를 전송에 사용하기 위해 의도하지만, 키 입력 데이터를 전송하기 위해 독립적 양식에서 사용될 수있다.

    또한 FormData 객체를 사용할 수 있습니다; FormData 객체는 XMLHttpRequest의를 사용하여 전송하는 키 / 값 쌍의 집합을 컴파일 할 수 있습니다. 그 형태는 주로 데이터를 전송에 사용하기 위해 의도하지만, 키 입력 데이터를 전송하기 위해 독립적 양식에서 사용될 수있다.

            var formElement = document.getElementById("myform_id");
        var formData = new FormData(formElement);
        console.log(formData);

  15. 15.이것은 자바 스크립트 객체 "고해상도"모든 양식 필드를 추가합니다 :

    이것은 자바 스크립트 객체 "고해상도"모든 양식 필드를 추가합니다 :

    var res = {};
$("#form input, #form select, #form textarea").each(function(i, obj) {
    res[obj.name] = $(obj).val();
})

  16. 16.또한 필요한 객체를 돌려 줄 수있는 대답을 포함했다.

    또한 필요한 객체를 돌려 줄 수있는 대답을 포함했다.

    function getFormData(form) {
var rawJson = form.serializeArray();
var model = {};

$.map(rawJson, function (n, i) {
    model[n['name']] = n['value'];
});

return model;
}

  17. 17.

    var formData = new FormData($('#form-id'));
params   = $('#form-id').serializeArray();

$.each(params, function(i, val) {
    formData.append(val.name, val.value);
});

  18. 18.

    function getFormData($form){
    var unindexed_array = $form.serializeArray();
    var indexed_array = {};

    $.map(unindexed_array, function(n, i){
        if(indexed_array[n['name']] == undefined){
            indexed_array[n['name']] = [n['value']];
        }else{
            indexed_array[n['name']].push(n['value']);
        }
    });

    return indexed_array;
}

  19. 19.객체 또는 양식에서 JSON을 위해이 기능을 사용할 수 있습니다.

    객체 또는 양식에서 JSON을 위해이 기능을 사용할 수 있습니다.

    에 대한 사용 :

    VAR 개체 = formService.getObjectFormFields ( "#의 idform");

    함수 getObjectFormFields (formSelector) { /// <요약> Função 케 반환 값 objeto COM 기반의 NAS propriedades 이름 도스 elementos 할 formulário. /// Seletor 할 formulário VAR 양식 = $ (formSelector); VAR 결과 = {}; VAR arrayAuxiliar = []; form.find ( "입력 : 텍스트"). 각 (기능 (인덱스 요소) { VAR 이름 = $ (요소) .attr ( '이름'); VAR 값 = $ (소자) (.val); [이름] = 결과 값; }); form.find ( "입력 [TYPE = 숨겨진]"). 각 (기능 (인덱스 요소) { VAR 이름 = $ (요소) .attr ( '이름'); VAR 값 = $ (소자) (.val); [이름] = 결과 값; }); form.find ( "입력 : 체크"). 각 (기능 (인덱스 요소) { VAR 이름; VAR 값; 경우 ($ (이) .attr ( "유형") == "라디오") { 이름 = $ (요소) .attr ( '이름'); 값 = $ (요소) .val (); [이름] = 결과 값; } 다른 경우 ($ (이) .attr ( "유형") == "체크 박스") { 이름 = $ (요소) .attr ( '이름'); 값 = $ (요소) .val (); 경우 (결과 [이름]) { 경우 (Array.isArray (결과 [이름])) { [이름] .push (값) 결과; } 다른 { VAR AUX = 결과 [이름]; [이름] 결과 = []; [이름] .push (AUX)를 발생; [이름] .push (값) 결과; } } 다른 { [이름] 결과 = []; [이름] .push (값) 결과; } } }); form.find ( "옵션을 선택하십시오 : 선택"). 각 (기능 (인덱스, 요소) { VAR 이름은 = $ (요소) .parent () ATTR ( '이름을.'); VAR 값 = $ (소자) (.val); [이름] = 결과 값; }); arrayAuxiliar = []; form.find ( "체크 박스 : 체크"). 각 (기능 (인덱스 요소) { VAR 이름 = $ (요소) .attr ( '이름'); VAR 값 = $ (소자) (.val); [이름] = arrayAuxiliar.push 결과 (값); }); form.find ( "텍스트 영역"). 각 (기능 (인덱스 요소) { VAR 이름 = $ (요소) .attr ( '이름'); VAR 값 = $ (소자) (.val); [이름] = 결과 값; }); 결과를 반환; }

  20. 20.JSONForms : 나는 바로이 문제를 해결하기 위해 라이브러리를 썼다. 그것은 형태를 취 각각의 입력을 통해 이동하고 쉽게 읽을 수있는 JSON 객체를 구축합니다.

    JSONForms : 나는 바로이 문제를 해결하기 위해 라이브러리를 썼다. 그것은 형태를 취 각각의 입력을 통해 이동하고 쉽게 읽을 수있는 JSON 객체를 구축합니다.

    당신은 다음과 같은 형식을 가지고 말 :

    <form enctype='application/json'>
  <input name='places[0][city]' value='New York City'>
  <input type='number' name='places[0][population]' value='8175133'>
  <input name='places[1][city]' value='Los Angeles'>
  <input type='number' name='places[1][population]' value='3792621'>
  <input name='places[2][city]' value='Chicago'>
  <input type='number' name='places[2][population]' value='2695598'>
</form>

    JSONForms '인코딩 방법에 양식을 전달하면 당신에게 다음과 같은 개체를 반환합니다 :

    {
  "places": [
    {
      "city": "New York City",
      "population": 8175133
    },
    {
      "city": "Los Angeles",
      "population": 3792621
    },
    {
      "city": "Chicago",
      "population": 2695598
    }
  ]
}

    여기에 귀하의 양식 데모입니다.

  21. 21.$ ( "양식") .bind ({), 기능 (예를 들어 "제출" e.preventDefault (); 을 console.log ($ (이) .serializeObject ()); //console.log ($ (이) .serialize ()); //console.log ($ (이) .serializeArray ()); }); $ .fn.serializeObject = 함수 () { VAR의 O = {}; VAR this.serializeArray A = (); () {(A, 기능을 .each $ 경우 (O [this.name!] == 미정) { 만약 (! O [this.name] .push) { O [this.name] = O [this.name]; } O [this.name] .push (this.value || ''); } 그밖에 { O [this.name = this.value || ''; } }); O를 반환; }; <스크립트 SRC = "https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
    <선택 이름 = "이"> <옵션 값 = "안녕하세요"를 선택 = "선택"> 안녕 <옵션 값 = "호"> 호

    $ ( "양식") .bind ({), 기능 (예를 들어 "제출" e.preventDefault (); 을 console.log ($ (이) .serializeObject ()); //console.log ($ (이) .serialize ()); //console.log ($ (이) .serializeArray ()); }); $ .fn.serializeObject = 함수 () { VAR의 O = {}; VAR this.serializeArray A = (); () {(A, 기능을 .each $ 경우 (O [this.name!] == 미정) { 만약 (! O [this.name] .push) { O [this.name] = O [this.name]; } O [this.name] .push (this.value || ''); } 그밖에 { O [this.name = this.value || ''; } }); O를 반환; }; <스크립트 SRC = "https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> <선택 이름 = "이"> <옵션 값 = "안녕하세요"를 선택 = "선택"> 안녕 <옵션 값 = "호"> 호

    Codepen

  22. 22.(.serializeArray ()) $ (양식) .serialize (에 의해 반환 된 하나), 및 $ (형태에 약간의 개선 등)의 부담없이 사용 직렬화 된 문자열이 아닌 객체를 선호하는 분들을 위해 코드 아래 :

    (.serializeArray ()) $ (양식) .serialize (에 의해 반환 된 하나), 및 $ (형태에 약간의 개선 등)의 부담없이 사용 직렬화 된 문자열이 아닌 객체를 선호하는 분들을 위해 코드 아래 :

    var Form = {
    _form: null,
    _validate: function(){
        if(!this._form || this._form.tagName.toLowerCase() !== "form") return false;
        if(!this._form.elements.length) return false;
    }, _loopFields: function(callback){
        var elements = this._form.elements;
        for(var i = 0; i < elements.length; i++){
            var element = form.elements[i];
            if(name !== ""){
                callback(this._valueOfField(element));
            }
        }
    }, _valueOfField: function(element){
        var type = element.type;
        var name = element.name.trim();
        var nodeName = element.nodeName.toLowerCase();
        switch(nodeName){
            case "input":
                if(type === "radio" || type === "checkbox"){
                    if(element.checked){
                        return element.value;
                    }
                }
                return element.value;
                break;
            case "select":
                if(type === "select-multiple"){
                    for(var i = 0; i < element.options.length; i++){
                        if(options[i].selected){
                            return element.value;
                        }
                    }
                }
                return element.value;
                break;
            case "button":
                switch(type){
                    case "reset": 
                    case "submit": 
                    case "button":
                        return element.value;
                        break;
                }
                break;
        } 
    }, serialize: function(form){
        var data = {};
        this._form = form;

        if(this._validate()){
            this._loopFields(function(value){
                if(value !== null) data[name] = value;
            });
        }
        return data;
    }
};

    이를 실행하려면, 단지 Form.serialize (형태)을 사용하고 기능이 유사한 개체를 반환합니다 :

    <!-- { username: "username", password: "password" } !-->
<input type="text" value="username">
<input type="password" value="password">

    보너스로, 당신이 하나 개의 직렬화 기능에 jQuery를 전체 번들을 설치할 필요가 없습니다 의미합니다.

  23. 23.여러 개의 체크 박스와 여러 선택을 담당하는 기능을 썼다. 이러한 경우는 배열을 반환합니다.

    여러 개의 체크 박스와 여러 선택을 담당하는 기능을 썼다. 이러한 경우는 배열을 반환합니다.

    function getFormData(formId) {
    return $('#' + formId).serializeArray().reduce(function (obj, item) {
        var name = item.name,
            value = item.value;

        if (obj.hasOwnProperty(name)) {
            if (typeof obj[name] == "string") {
                obj[name] = [obj[name]];
                obj[name].push(value);
            } else {
                obj[name].push(value);
            }
        } else {
            obj[name] = value;
        }
        return obj;
    }, {});
}

  24. 24.페이지 새로 고침없이 양식을 제출하고 파일로 모든 값을 잡기 위해 폼 입력 요소 필드 및 입력 파일을 보여주는 그것이 여기에 포함

    페이지 새로 고침없이 양식을 제출하고 파일로 모든 값을 잡기 위해 폼 입력 요소 필드 및 입력 파일을 보여주는 그것이 여기에 포함

    <형태 ID = "imageUploadForm"행동 = ""METHOD = "POST"에 enctype = "multipart / form-data"로> <입력 유형 = "텍스트"클래스 = "폼 컨트롤"이름 = 'LNAME'ID = "LNAME"자리 = "성"> <텍스트 영역 클래스 = "폼 컨트롤"이름 = '주소'ID = "주소"행 = "5"COLS = "5"자리 = "주소"> 에 당신의 PHP 파일에 아약스 요청을 보내드립니다 버튼 페이지를 제출합니다. $ ( '#의 imageUploadForm'). ((기능을 '제출'에 (E) { FNAME = $ ( '#의 FNAME') 발 ().; LNAME = $ ( '#의 LNAME') 발 ().; 주소 = $ ( '# 주소') 발 ().; PHONENO = $ ( '#의 PHONENO') 발 ().; 파일 = $ ( '# 파일') 발 ().; e.preventDefault (); VAR formData 새로운 FormData (이) =; formData.append ( '파일'$ ( '# 파일') [0]); formData.append ( 'FNAME', $ ( '#의 FNAME') 발 ().); formData.append ( 'LNAME', $ ( '#의 LNAME') 발 ().); formData.append ( 'PHONENO', $ ( '#의 PHONENO') 발 ().); formData.append ( '주소', $ ( '# 주소') 발 ().); {(아약스 $ 입력 : 'POST', URL : "test.php" // URL ' ' 데이터 : formData, 캐시 : 거짓, ContentType을 : 거짓, processData : 거짓, 성공 : 기능 (데이터) { 경고 ( '파일과 데이터는 제출!'); } }); }))

  25. 25.

    $(form).serializeArray().reduce(function (obj, item) {
      if (obj[item.name]) {
           if ($.isArray(obj[item.name])) {
               obj[item.name].push(item.value);
           } else {
                var previousValue = obj[item.name];
                obj[item.name] = [previousValue, item.value];
           }
      } else {
           obj[item.name] = item.value;
      }

     return obj;
}, {});

    이 문제를 해결합니다 : multiselects 작동하지 않을 수 있습니다.

  26. 26.당신은 모든 완전히 정확하지 않습니다. 당신은 쓸 수 없습니다 :

    당신은 모든 완전히 정확하지 않습니다. 당신은 쓸 수 없습니다 :

    formObj[input.name] = input.value;

    "PARAM1": "값 1", "PARAM1": "값 2"-이 방법은 다중 선택 목록이있는 경우 때문에 그것이로 전송이기 때문에 그 값은 마지막으로 덮어 쓰게됩니다.

    그래서, 올바른 방법은 다음과 같습니다

    if (formData[input.name] === undefined) {
    formData[input.name] = input.value;
}
else {
    var inputFieldArray = $.merge([], $.isArray(formData[input.name]) ? formData[input.name] : [formData[input.name]]);
    $.merge(inputFieldArray, [input.value]);
    formData[input.name] = $.merge([], inputFieldArray);
}

  27. 27.이 방법은 그것을해야한다. 그것은 양식 데이터를 직렬화하고 객체로 변환합니다. 뿐만 아니라 체크 박스의 그룹을 처리합니다.

    이 방법은 그것을해야한다. 그것은 양식 데이터를 직렬화하고 객체로 변환합니다. 뿐만 아니라 체크 박스의 그룹을 처리합니다.

    function getFormObj(formId) {
  var formParams = {};
  $('#' + formId)
    .serializeArray()
    .forEach(function(item) {
      if (formParams[item.name]) {
        formParams[item.name] = [formParams[item.name]];
        formParams[item.name].push(item.value)
      } else {
        formParams[item.name] = item.value
      }
    });
  return formParams;
}

  28. 28.여기 JS 제가 대상으로 폼 데이터를 추출하는 기능을 쓴 좋은 바닐라이다. 또한, 개체에 대한 추가 삽입 양식 입력 필드를 삭제하는 옵션을 갖는다.

    여기 JS 제가 대상으로 폼 데이터를 추출하는 기능을 쓴 좋은 바닐라이다. 또한, 개체에 대한 추가 삽입 양식 입력 필드를 삭제하는 옵션을 갖는다.

    const extractFormData = ({ form, clear, add }) => {
  return [].slice.call(form.children).filter(node => node.nodeName === 'INPUT')
  .reduce((formData, input) => {
    const value = input.value
    if (clear) { input.value = '' }
    return {
      ...formData,
      [input.name]: value
    }
  }, add)
}

    여기에 포스트 요청의 사용의 예입니다 :

    submitGrudge(e) {
  e.preventDefault()

  const form = e.target
  const add = { id: Date.now(), forgiven: false }
  const grudge = extractFormData({ form, add, clear: true })

  // grudge = {
  //  "name": "Example name",
  //  "offense": "Example string",
  //  "date": "2017-02-16",
  //  "id": 1487877281983,
  //  "forgiven": false
  // }

  fetch('http://localhost:3001/api/grudge', {
    method: 'post',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(grudge)
  })
    .then(response => response.json())
    .then(grudges => this.setState({ grudges }))
    .catch(err => console.log('error: ', err))
}

    29. from https://stackoverflow.com/questions/2276463/how-can-i-get-form-data-with-javascript-jquery by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] 어떻게 iPad 용 Safari에서 jQuery를 사용하여 터치 이벤트를 인식 할 수 있습니까? 그것은 수 있습니까?  (0) 2020.10.04
[JQUERY] 어떻게 jQuery를에 PUT / DELETE 요청을 보내?  (0) 2020.10.04
[JQUERY] JS / jQuery를 화살표 키에 바인딩  (0) 2020.10.04
[JQUERY] 때마다 원격 모달 쇼에게 동일한 콘텐츠를 부트 스트랩 트위터  (0) 2020.10.04
[JQUERY] 두 $ .post 요청 요청 .post other.Second $이 실행되지 않습니다 후 하나를  (0) 2020.10.04
,

티스토리툴바