복붙노트

[JQUERY] jQuery로 자바 스크립트 객체로 변환 폼 데이터

JQUERY

jQuery로 자바 스크립트 객체로 변환 폼 데이터

해결법

  1. 1.serializeArray 이미 정확히 않습니다. 당신은 당신의 요구 형식으로 데이터를 마사지해야합니다

    serializeArray 이미 정확히 않습니다. 당신은 당신의 요구 형식으로 데이터를 마사지해야합니다

    function objectifyForm(formArray) {
    //serialize data function
    var returnArray = {};
    for (var i = 0; i < formArray.length; i++){
        returnArray[formArray[i]['name']] = formArray[i]['value'];
    }
    return returnArray;
}

    그들은 덮어 얻을 것이다으로 실제 입력으로 같은 이름을 가진 숨겨진 필드에 조심.

  2. 2.현재 소스는 GitHub의와 정자에 있습니다.

    현재 소스는 GitHub의와 정자에 있습니다.

    다음 코드는 입력 이름을 모두 한 종류의 작업을 할 수 있습니다; 하고 그냥 예상대로 처리합니다.

    예를 들면 :

    <!-- All of these will work! -->
<input name="honey[badger]" value="a">
<input name="wombat[]" value="b">
<input name="hello[panda][]" value="c">
<input name="animals[0][name]" value="d">
<input name="animals[0][breed]" value="e">
<input name="crazy[1][][wonky]" value="f">
<input name="dream[as][vividly][as][you][can]" value="g">

    // Output
{
  "honey":{
    "badger":"a"
  },
  "wombat":["b"],
  "hello":{
    "panda":["c"]
  },
  "animals":[
    {
      "name":"d",
      "breed":"e"
    }
  ],
  "crazy":[
    null,
    [
      {"wonky":"f"}
    ]
  ],
  "dream":{
    "as":{
      "vividly":{
        "as":{
          "you":{
            "can":"g"
          }
        }
      }
    }
  }
}

    $('#my-form').serializeObject();

    (function($){
    $.fn.serializeObject = function(){

        var self = this,
            json = {},
            push_counters = {},
            patterns = {
                "validate": /^[a-zA-Z][a-zA-Z0-9_]*(?:\[(?:\d*|[a-zA-Z0-9_]+)\])*$/,
                "key":      /[a-zA-Z0-9_]+|(?=\[\])/g,
                "push":     /^$/,
                "fixed":    /^\d+$/,
                "named":    /^[a-zA-Z0-9_]+$/
            };


        this.build = function(base, key, value){
            base[key] = value;
            return base;
        };

        this.push_counter = function(key){
            if(push_counters[key] === undefined){
                push_counters[key] = 0;
            }
            return push_counters[key]++;
        };

        $.each($(this).serializeArray(), function(){

            // Skip invalid keys
            if(!patterns.validate.test(this.name)){
                return;
            }

            var k,
                keys = this.name.match(patterns.key),
                merge = this.value,
                reverse_key = this.name;

            while((k = keys.pop()) !== undefined){

                // Adjust reverse_key
                reverse_key = reverse_key.replace(new RegExp("\\[" + k + "\\]$"), '');

                // Push
                if(k.match(patterns.push)){
                    merge = self.build([], self.push_counter(reverse_key), merge);
                }

                // Fixed
                else if(k.match(patterns.fixed)){
                    merge = self.build([], k, merge);
                }

                // Named
                else if(k.match(patterns.named)){
                    merge = self.build({}, k, merge);
                }
            }

            json = $.extend(true, json, merge);
        });

        return json;
    };
})(jQuery);

  3. 3.잘못은 무엇으로있다 :

    잘못은 무엇으로있다 :

    var data = {};
$(".form-selector").serializeArray().map(function(x){data[x.name] = x.value;});

  4. 4.토비아스 코헨의 솔루션의 고정 된 버전. 이 사람은 제대로 ''0과 같은 falsy 값을 처리합니다.

    토비아스 코헨의 솔루션의 고정 된 버전. 이 사람은 제대로 ''0과 같은 falsy 값을 처리합니다.

    jQuery.fn.serializeObject = function() {
  var arrayData, objectData;
  arrayData = this.serializeArray();
  objectData = {};

  $.each(arrayData, function() {
    var value;

    if (this.value != null) {
      value = this.value;
    } else {
      value = '';
    }

    if (objectData[this.name] != null) {
      if (!objectData[this.name].push) {
        objectData[this.name] = [objectData[this.name]];
      }

      objectData[this.name].push(value);
    } else {
      objectData[this.name] = value;
    }
  });

  return objectData;
};

    그리고 코딩 편의를 위해 커피 스크립트 버전 :

    jQuery.fn.serializeObject = ->
  arrayData = @serializeArray()
  objectData = {}

  $.each arrayData, ->
    if @value?
      value = @value
    else
      value = ''

    if objectData[@name]?
      unless objectData[@name].push
        objectData[@name] = [objectData[@name]]

      objectData[@name].push value
    else
      objectData[@name] = value

  return objectData

  5. 5.그것은 한 줄, 그리고 그것을 Underscore.js에 의존하지 않는 등 때문에 Array.prototype.reduce를 사용하여 같은 I :

    그것은 한 줄, 그리고 그것을 Underscore.js에 의존하지 않는 등 때문에 Array.prototype.reduce를 사용하여 같은 I :

    $('#formid').serializeArray()
    .reduce(function(a, x) { a[x.name] = x.value; return a; }, {});

    이 Array.prototype.map를 사용하여 대답과 비슷하지만 당신은 추가 개체 변수로 범위를 혼란 할 필요가 없습니다. 원 스톱 쇼핑.

    중요 참고 : 중복 된 이름의 속성이 입력이 양식은 HTML 유효하며, 실제로 일반적인 방법이다. 이 글의 답변 중 하나를 사용하는 경우에 부적절 할 것 (객체 키가 고유해야부터).

  6. 6.이러한 답변은 모두 나에게 맨 위에 그렇게 보였다. 단순라고 할 뭔가가있다. 만큼 모든 형태의 입력이 가지고있는 이름 속성이 그냥 짐 멋쟁이 작동합니다 설정합니다.

    이러한 답변은 모두 나에게 맨 위에 그렇게 보였다. 단순라고 할 뭔가가있다. 만큼 모든 형태의 입력이 가지고있는 이름 속성이 그냥 짐 멋쟁이 작동합니다 설정합니다.

  7. 7.정말 각 요소를 검사하지 않고이 작업을 수행 할 수있는 방법은 없습니다. "다른 사람이 이미 방법을 쓴 그 변환하는 JSON 객체 형태?"당신이 정말 알고 싶은 것은 다음과 같은 뭔가가 작동합니다 - 그것은 단지 당신에게 POST를 통해 반환되는 형태 요소를 줄 것이다 노트 (이름이 있어야합니다). 이 테스트되지 않은 상태입니다.

    정말 각 요소를 검사하지 않고이 작업을 수행 할 수있는 방법은 없습니다. "다른 사람이 이미 방법을 쓴 그 변환하는 JSON 객체 형태?"당신이 정말 알고 싶은 것은 다음과 같은 뭔가가 작동합니다 - 그것은 단지 당신에게 POST를 통해 반환되는 형태 요소를 줄 것이다 노트 (이름이 있어야합니다). 이 테스트되지 않은 상태입니다.

    function formToJSON( selector )
{
     var form = {};
     $(selector).find(':input[name]:enabled').each( function() {
         var self = $(this);
         var name = self.attr('name');
         if (form[name]) {
            form[name] = form[name] + ',' + self.val();
         }
         else {
            form[name] = self.val();
         }
     });

     return form;
}

  8. 8.당신이 Underscore.js를 사용하는 경우는 상대적으로 간결을 사용할 수 있습니다 :

    당신이 Underscore.js를 사용하는 경우는 상대적으로 간결을 사용할 수 있습니다 :

    _.object(_.map($('#myform').serializeArray(), _.values))

  9. 9.I는 입력 이름이 같은 이름 [키] 같은 배열로있는 경우, 다음 이렇게 생성하도록, 다른 모든 응답에 문제가 있음을 확인 :

    I는 입력 이름이 같은 이름 [키] 같은 배열로있는 경우, 다음 이렇게 생성하도록, 다른 모든 응답에 문제가 있음을 확인 :

    예를 들면 : 당신은 아래와 같은 HTML 양식이있는 경우 :

    <form>
    <input name="name" value="value" >
    <input name="name1[key1]" value="value1" >
    <input name="name2[key2]" value="value2" >
    <input name="name3[key3]" value="value3" >
</form>

    그러나 단지 아래의 JSON과 같이 생성해야하며, 다른 답변 모두와 함께 다음과 같은 물체가되지 않습니다. 그래서 사람이 다음과 같은 JSON 같은 것을 가지고하고자하는 경우, 아래의 JS 코드를보십시오.

    {
    name  : 'value',
    name1 : { key1 : 'value1' },
    name2 : { key2 : 'value2' },
    name3 : { key2 : 'value2' }
}

    $ .fn.getForm2obj = 함수 () { VAR _ = {}; {) this.serializeArray () 함수 (N (.MAP $ CONST 키 n.name.match = (/ [A-ZA-Z0-9 _] + | (= \ [\]) / g?); 경우 (keys.length> 1) { tmp를하자 = _; 팝 keys.pop = (); 대해 (ⅰ = 0하자 나는

    1 2 (3)을로
    남성 여성

  10. 10.좋아, 나는이 이미 높은 upvoted 답을 가지고 알고 있지만, 다른 유사한 질문은 최근에 질문을 받았다, 나는이 질문에 대한 지시도했다. 나는 그것이 허용 솔루션을 통해 이점을 제공하기 때문에,뿐만 아니라 내 솔루션을 제공하고 싶습니다 : 당신은 (방법 UI 기능에 따라, 때로는 중요하다) 장애인 폼 요소를 포함 할 수 있습니다

    좋아, 나는이 이미 높은 upvoted 답을 가지고 알고 있지만, 다른 유사한 질문은 최근에 질문을 받았다, 나는이 질문에 대한 지시도했다. 나는 그것이 허용 솔루션을 통해 이점을 제공하기 때문에,뿐만 아니라 내 솔루션을 제공하고 싶습니다 : 당신은 (방법 UI 기능에 따라, 때로는 중요하다) 장애인 폼 요소를 포함 할 수 있습니다

    여기에 다른 SO 질문에서 내 대답은 :

    처음에, 우리는 jQuery의 serializeArray () 메소드를 사용하고,하지만 그건 불가능 폼 요소가 포함되어 있지 않습니다. 우리는 페이지의 다른 소스에 "으로 동기"되어 자주 사용하지 않도록 폼 요소를하지만, 우리는 여전히 우리의 직렬화 된 객체의 데이터를 포함해야합니다. 그래서 serializeArray은 () 밖이다. 해당 컨테이너에있는 모든 입력 요소를 얻기 위해 (둘 다 활성화 및 비활성화를) 입력 선택하고 $ .MAP ()는 우리의 개체를 만드는 : 우리는 사용했다.

    var inputs = $("#container :input");
var obj = $.map(inputs, function(n, i)
{
    var o = {};
    o[n.name] = $(n).val();
    return o;
});
console.log(obj);

    참고 작업이 들어, 입력의 각 결과 객체의 속성의 이름이됩니다 name 속성을해야 함.

    즉 실제로 약간 우리가 사용하는 것과 수정됩니다. 우리는이를 사용, 그래서 우리는 .NET IDictionary으로 구조화 된 개체를 만드는 데 필요한 : (나는 경우 여기를 제공하는 것이 유용합니다)

    var obj = $.map(inputs, function(n, i)
{
    return { Key: n.name, Value: $(n).val() };
});
console.log(obj);

    이러한 솔루션 모두 같은 I, 그들은 $의 .MAP () 함수의 간단한 사용, 그리고 당신이 당신의 선택을 완벽하게 제어 할 수 있기 때문에 (그래서, 어떤 요소 당신은 당신의 결과 객체에 포함 끝). 또한, 여분의 플러그인이 필요하지 않습니다. 일반 오래된 jQuery를.

  11. 11.이 기능은 동일한 이름을 가진 여러 요소와 함께 다차원 배열을 처리해야합니다.

    이 기능은 동일한 이름을 가진 여러 요소와 함께 다차원 배열을 처리해야합니다.

    지금까지 몇 년 동안 그것을 사용했습니다 :

    jQuery.fn.serializeJSON=function() {
  var json = {};
  jQuery.map(jQuery(this).serializeArray(), function(n, i) {
    var _ = n.name.indexOf('[');
    if (_ > -1) {
      var o = json;
      _name = n.name.replace(/\]/gi, '').split('[');
      for (var i=0, len=_name.length; i<len; i++) {
        if (i == len-1) {
          if (o[_name[i]]) {
            if (typeof o[_name[i]] == 'string') {
              o[_name[i]] = [o[_name[i]]];
            }
            o[_name[i]].push(n.value);
          }
          else o[_name[i]] = n.value || '';
        }
        else o = o[_name[i]] = o[_name[i]] || {};
      }
    }
    else {
      if (json[n.name] !== undefined) {
        if (!json[n.name].push) {
          json[n.name] = [json[n.name]];
        }
        json[n.name].push(n.value || '');
      }
      else json[n.name] = n.value || '';      
    }
  });
  return json;
};

  12. 12.이 작업을 수행 할 수 있습니다 :

    이 작업을 수행 할 수 있습니다 :

    var frm = $(document.myform);
var data = JSON.stringify(frm.serializeArray());

    JSON을 참조하십시오.

  13. 13.함수 결합 객체를 수정 한 줄 (더 jQuery를 제외한 의존성) 사용 방법은 맵핑에 전달하지 않는다.

    함수 결합 객체를 수정 한 줄 (더 jQuery를 제외한 의존성) 사용 방법은 맵핑에 전달하지 않는다.

    $('form').serializeArray().map(function(x){this[x.name] = x.value; return this;}.bind({}))[0]

    그것은 무엇?

    "id=2&value=1&comment=ok" => Object { id: "2", value: "1", comment: "ok" }

    (하나는 쉽게 모두 일정한 양식 제출 조치를 지원할 수뿐만 아니라 아약스 요청) 진보적 인 웹 응용 프로그램에 적합

  14. 14.사용하다:

    사용하다:

    function form_to_json (selector) {
  var ary = $(selector).serializeArray();
  var obj = {};
  for (var a = 0; a < ary.length; a++) obj[ary[a].name] = ary[a].value;
  return obj;
}

    산출:

    {"myfield": "myfield value", "passwordfield": "mypasswordvalue"}

  15. 15.바닐라 JS에서 간단한 라이너와 그 레버리지의 fromEntries (항상 체크 브라우저 지원) :

    바닐라 JS에서 간단한 라이너와 그 레버리지의 fromEntries (항상 체크 브라우저 지원) :

    Object.fromEntries(new FormData(form))

  16. 16.단순 최선 여기에있다. 나는 단순한 문자열이 정규 표현식으로 대체 사용했습니다, 그들은 지금까지 마법처럼 일했다. 나는 정규 표현식 전문가가 아니다,하지만 난 당신도 매우 복잡한 객체를 채울 수 있습니다 내기.

    단순 최선 여기에있다. 나는 단순한 문자열이 정규 표현식으로 대체 사용했습니다, 그들은 지금까지 마법처럼 일했다. 나는 정규 표현식 전문가가 아니다,하지만 난 당신도 매우 복잡한 객체를 채울 수 있습니다 내기.

    var values = $(this).serialize(),
attributes = {};

values.replace(/([^&]+)=([^&]*)/g, function (match, name, value) {
    attributes[name] = value;
});

  17. 17.일부 오래된 대답에서 :

    일부 오래된 대답에서 :

    $('form input, form select').toArray().reduce(function(m,e){m[e.name] = $(e).val(); return m;},{})

  18. 18.나는 그렇지 않으면 나를 위해 작동 토비 코헨의 코드 (내가 직접 댓글을 충분히 포인트가없는)에 문제가 있음을 발견했다. ":" "대신에"이름 "의 : [" "," "] 당신은 같은 이름을 가진 두 개의 옵션을 선택, 모두 값 ="이름 ", 원래의 코드가 생성됩니다"가있는 경우

    나는 그렇지 않으면 나를 위해 작동 토비 코헨의 코드 (내가 직접 댓글을 충분히 포인트가없는)에 문제가 있음을 발견했다. ":" "대신에"이름 "의 : [" "," "] 당신은 같은 이름을 가진 두 개의 옵션을 선택, 모두 값 ="이름 ", 원래의 코드가 생성됩니다"가있는 경우

    이런 조건이있는 경우에 제 "|| O [this.name] == '' '을 추가로 개선 할 수 있다고 생각 :

    $.fn.serializeObject = function()
{
    var o = {};
    var a = this.serializeArray();
    $.each(a, function() {
        if (o[this.name] || o[this.name] == '') {
            if (!o[this.name].push) {
                o[this.name] = [o[this.name]];
            }
            o[this.name].push(this.value || '');
        } else {
            o[this.name] = this.value || '';
        }
    });
    return o;
};

  19. 19.maček의 솔루션을 사용하여, 나는 ASP.NET MVC가 같은 양식에 자신의 중첩 / 복잡한 객체를 처리하는 방식으로 작동하도록 수정했습니다. 당신이해야 할 모든이에 유효성 검사 부분을 수정할 수 있습니다 :

    maček의 솔루션을 사용하여, 나는 ASP.NET MVC가 같은 양식에 자신의 중첩 / 복잡한 객체를 처리하는 방식으로 작동하도록 수정했습니다. 당신이해야 할 모든이에 유효성 검사 부분을 수정할 수 있습니다 :

    "validate": /^[a-zA-Z][a-zA-Z0-9_]*((?:\[(?:\d*|[a-zA-Z0-9_]+)\])*(?:\.)[a-zA-Z][a-zA-Z0-9_]*)*$/,

    이 일치하고 정확하게 같은 이름을 가진 요소를 매핑합니다 :

    <input type="text" name="zooName" />

    과

    <input type="text" name="zooAnimals[0].name" />

  20. 20.단지 jQuery를, jquery.serializeJSON에 대한 것을 할 수있는 플러그인이있다. 지금은 몇 가지 프로젝트에 성공적으로 사용하고 있습니다. 그것은 마법처럼 작동합니다.

    단지 jQuery를, jquery.serializeJSON에 대한 것을 할 수있는 플러그인이있다. 지금은 몇 가지 프로젝트에 성공적으로 사용하고 있습니다. 그것은 마법처럼 작동합니다.

  21. 21.나는이 문제에 대해있는 가장 간단하고 정확한 방법은 바베큐 플러그인 또는 (0.5K의 크기가 바이트에 관한 것입니다)이 하나를 사용하는 것이 었습니다.

    나는이 문제에 대해있는 가장 간단하고 정확한 방법은 바베큐 플러그인 또는 (0.5K의 크기가 바이트에 관한 것입니다)이 하나를 사용하는 것이 었습니다.

    또한 다중 차원 배열로 사용할 수 있습니다.

    $ .fn.serializeObject = 함수 () { $ .deparam를 반환 (this.serialize ()); };

  22. 22.

    const formData = new FormData(form);

let formDataJSON = {};

for (const [key, value] of formData.entries()) {

    formDataJSON[key] = value;
}

  23. 23.당신이 반복하는 2 이상의 컬렉션이없는 당신이, 당신이 당신의 값을 소독 할 수해야하는 경우는 (객체에 저장하기 전에 "이름"과 "값"이외의 사물을 얻을 수 있습니다 : 때문에 나는이 방법을 선호 당신은)는, 예를 들어, 저장하고자하지 않는 것이 기본값이있는 경우.

    당신이 반복하는 2 이상의 컬렉션이없는 당신이, 당신이 당신의 값을 소독 할 수해야하는 경우는 (객체에 저장하기 전에 "이름"과 "값"이외의 사물을 얻을 수 있습니다 : 때문에 나는이 방법을 선호 당신은)는, 예를 들어, 저장하고자하지 않는 것이 기본값이있는 경우.

    $.formObject = function($o) {
    var o = {},
        real_value = function($field) {
            var val = $field.val() || "";

            // additional cleaning here, if needed

            return val;
        };

    if (typeof o != "object") {
        $o = $(o);
    }

    $(":input[name]", $o).each(function(i, field) {
        var $field = $(field),
            name = $field.attr("name"),
            value = real_value($field);

        if (o[name]) {
            if (!$.isArray(o[name])) {
                o[name] = [o[name]];
            }

            o[name].push(value);
        }

        else {
            o[name] = value;
        }
    });

    return o;
}

    사용 같은 :

    var obj = $.formObject($("#someForm"));

    단지 파이어 폭스에서 테스트.

  24. 24.객체에 아무 것도 돌려 (단위 테스트되지 않음)

    객체에 아무 것도 돌려 (단위 테스트되지 않음)

    <script type="text/javascript">
string = {};

string.repeat = function(string, count)
{
    return new Array(count+1).join(string);
}

string.count = function(string)
{
    var count = 0;

    for (var i=1; i<arguments.length; i++)
    {
        var results = string.match(new RegExp(arguments[i], 'g'));
        count += results ? results.length : 0;
    }

    return count;
}

array = {};

array.merge = function(arr1, arr2)
{
    for (var i in arr2)
    {
        if (arr1[i] && typeof arr1[i] == 'object' && typeof arr2[i] == 'object')
            arr1[i] = array.merge(arr1[i], arr2[i]);
        else
            arr1[i] = arr2[i]
    }

    return arr1;
}

array.print = function(obj)
{
    var arr = [];
    $.each(obj, function(key, val) {
        var next = key + ": ";
        next += $.isPlainObject(val) ? array.print(val) : val;
        arr.push( next );
      });

    return "{ " +  arr.join(", ") + " }";
}

node = {};

node.objectify = function(node, params)
{
    if (!params)
        params = {};

    if (!params.selector)
        params.selector = "*";

    if (!params.key)
        params.key = "name";

    if (!params.value)
        params.value = "value";

    var o = {};
    var indexes = {};

    $(node).find(params.selector+"["+params.key+"]").each(function()
    {
        var name = $(this).attr(params.key),
            value = $(this).attr(params.value);

        var obj = $.parseJSON("{"+name.replace(/([^\[]*)/, function()
        {
            return '"'+arguments[1]+'"';
        }).replace(/\[(.*?)\]/gi, function()
        {
            if (arguments[1].length == 0)
            {
                var index = arguments[3].substring(0, arguments[2]);
                indexes[index] = indexes[index] !== undefined ? indexes[index]+1 : 0;

                return ':{"'+indexes[index]+'"';
            }
            else
                return ':{"'+escape(arguments[1])+'"';
        })+':"'+value.replace(/[\\"]/gi, function()
        {
            return "\\"+arguments[0]; 
        })+'"'+string.repeat('}', string.count(name, ']'))+"}");

        o = array.merge(o, obj);
    });

    return o;
}
</script>

    테스트의 출력 :

    $(document).ready(function()
{
    console.log(array.print(node.objectify($("form"), {})));
    console.log(array.print(node.objectify($("form"), {selector: "select"})));
});

    의 위에

    <form>
    <input name='input[a]' type='text' value='text'/>
    <select name='input[b]'>
        <option>select</option>
    </select>

    <input name='otherinput[c][a]' value='a'/>
    <input name='otherinput[c][]' value='b'/>
    <input name='otherinput[d][b]' value='c'/>
    <input name='otherinput[c][]' value='d'/>

    <input type='hidden' name='anotherinput' value='hidden'/>
    <input type='hidden' name='anotherinput' value='1'/>

    <input type='submit' value='submit'/>
</form>

    얻을 것입니다 :

    { input: { a: text, b: select }, otherinput: { c: { a: a, 0: b, 1: d }, d: { b: c } }, anotherinput: 1 }
{ input: { b: select } }

  25. 25.내가 선택한 솔루션에 문제가 있음을 발견했다.

    내가 선택한 솔루션에 문제가 있음을 발견했다.

    어레이 기반 이름을 가진 형태를 사용할 때 jQuery를 serializeArray () 함수는 실제로 종료.

    I 용도 어레이 기반 필드 이름 여러 뷰에서 동일한 페이지에 여러 번에 넣을 수 동일한 형태를 허용 할 수있는 프레임 워크 PHP있다. 이 형태의 모델을 충돌없이 동일한 페이지에 모두 추가, 편집을 넣고 삭제 편리 할 수 ​​있습니다.

    나는 내 자신의 serializeArray ()를 쓰기로 결정에서이 절대 기본 기능을하지 않고 형태를 직렬화하고 싶었 이후 :

            var $vals = {};

        $("#video_edit_form input").each(function(i){
            var name = $(this).attr("name").replace(/editSingleForm\[/i, '');

            name = name.replace(/\]/i, '');

            switch($(this).attr("type")){
                case "text":
                    $vals[name] = $(this).val();
                    break;
                case "checkbox":
                    if($(this).attr("checked")){
                        $vals[name] = $(this).val();
                    }
                    break;
                case "radio":
                    if($(this).attr("checked")){
                        $vals[name] = $(this).val();
                    }
                    break;
                default:
                    break;
            }
        });

    참고 :이 또한 () 에러 코드의 나머지 부분에서 발생하는 경우 "변경 내용 저장"라는 링크 버튼을 배치하면 이렇게 양식이 제출되지 않습니다 형태의 외부 제출 작동합니다.

    또한이 기능은 확인을 위해 서버 측에 보낼 데이터를 수집하는 데에만 양식을 확인하는 데 사용해서는 안됩니다 있습니다. 같은 약하고 대량 할당 된 코드를 사용하여 XSS 등의 원인이됩니다

  26. 26.요즘 같은 문제를 가지고 동일한 구조의 JSON 객체로 양식을 변환이 .toJSON jQuery 플러그인으로 나왔다. 이 또한 사용자가 특정 장소에서 더 많은 필드를 추가 할 수 있도록 할 동적으로 생성 된 형태의 expecially에 유용합니다.

    요즘 같은 문제를 가지고 동일한 구조의 JSON 객체로 양식을 변환이 .toJSON jQuery 플러그인으로 나왔다. 이 또한 사용자가 특정 장소에서 더 많은 필드를 추가 할 수 있도록 할 동적으로 생성 된 형태의 expecially에 유용합니다.

    당신이 <장소> 표현이 양식을 상상할 수 : 요점은 당신이 실제로는 구조 자체를 가지고, 그래서 당신은 사용자가 마을에서 자신의 좋아하는 장소를 삽입하는 형태를 만들고 싶어 말을 할 수 있도록 양식을 구축 할 수있다. .. 에 대한리스트를 포함하는 XML 요소는 따라서 사용자의리스트를 추천 <장소> ... 요소 예 A <이름> ... 요소 A에 대한 각각 함유 한 다음 <형> ... 요소의 목록 <활동> ... 요소는 당신이 그런 장소에서 수행 할 수있는 활동을 나타냅니다. 그래서 XML 구조는 다음과 같이 될 것이다 :

    <places>

    <place>

        <name>Home</name>
        <type>dwelling</type>

        <activity>sleep</activity>
        <activity>eat</activity>
        <activity>watch TV</activity>

    </place>

    <place>...</place>

    <place>...</place>

</places>

    얼마나 멋진 것은 당신이 중 하나를 할 수 있습니다 있도록이 정확한 구조를 나타낼 것이 밖으로 JSON 객체를 가지고하는 것입니다 :

    OK, 이제 우리는 형태가 XML 파일을 나타낼 수있는 방법을 생각해야합니다.

    물론 <형식>의 태그는 루트입니다,하지만 우리는 우리가 그것을 입력 태그를 사용할 수 있도록 컨테이너가 아닌 데이터 요소 자체가 <장소> 요소를 가지고있다.

    의

    태그 편리 오는 곳 여기! 우리는 우리의 양식 / XML 표현에서이 같은 결과를 얻기 때문에 모든 컨테이너 요소를 표현하기 위해
    태그를 사용합니다 :

    <form name="places">

    <fieldset name="place">

        <input type="text" name="name"/>
        <select name="type">
            <option value="dwelling">Dwelling</option>
            <option value="restoration">Restoration</option>
            <option value="sport">Sport</option>
            <option value="administrative">Administrative</option>
        </select>

        <input type="text" name="activity"/>
        <input type="text" name="activity"/>
        <input type="text" name="activity"/>

    </fieldset>

</form>

    이 양식에서 볼 수 있듯이, 우리는 고유 한 이름의 규칙을 위반하고 있지만 그들은 따라서 그들은 단지 배열 내 자신의 인덱스에 의해 참조됩니다 요소의 배열로 변환 될 것이기 때문에이 OK입니다.

    어떤 이름 = 없다 방법이 시점에서 당신이 볼 수있는 "배열 []"형식 내 이름과 모든 것을 같이 아주 간단하고 의미입니다.

    이제 우리는이 양식은 다음과 같이됩니다 JSON 객체로 변환하려면 :

    {'places':{

    'place':[

        {

            'name': 'Home',
            'type': 'dwelling',

            'activity':[

                 'sleep',
                 'eat',
                 'watch TV'

            ]

        },

        {...},

        {...}

    ]

}}

    나는 누군가가이 같은이 코드 검토 스레드와 외모에 최적화하는데 도움을 준 플러그인이 jQuery를 개발 한이 작업을 수행하려면 :

    $.fn.toJSO = function () {
    var obj = {},
        $kids = $(this).children('[name]');
    if (!$kids.length) {
        return $(this).val();
    }
    $kids.each(function () {
        var $el = $(this),
            name = $el.attr('name');
        if ($el.siblings("[name=" + name + "]").length) {
            if (!/radio|checkbox/i.test($el.attr('type')) || $el.prop('checked')) {
                obj[name] = obj[name] || [];
                obj[name].push($el.toJSO());
            }
        } else {
            obj[name] = $el.toJSO();
        }
    });
    return obj;
};

    나는 또한이 더 설명이 하나 개의 블로그 게시물을했다.

    이 변환의 JSON (심지어 라디오와 체크 박스)에 대한 형태로 모든 것을 당신이해야 할 남은 것 모두 호출입니다

    $.post('script.php',('form').toJSO(), ...);

    내가 JSON 객체를하고 있는지 .serialize () 대부분의 경우 .serializeArray () 작업 크고 주로 사용하기위한 것입니다로 형태를 변환하는 많은 방법이 알고,하지만 난 XML 구조로 양식을 작성하는이 모든 아이디어를 생각한다 잘 형성된 JSON 객체로 변환 의미있는 이름과 가치는 시도, 당신은 동적으로 생성 된 양식 데이터를 가져 오지해야하는 경우 또한 걱정없이 같은 이름 입력 태그를 추가 할 수있는 사실은 매우 유용하다.

    나는이 사람을 도움이되기를 바랍니다!

  27. 27.나 자신이 생산에 사용하는 다차원 자바 스크립트 객체에 양식을 코딩. 결과는 https://github.com/serbanghita/formToObject.js입니다.

    나 자신이 생산에 사용하는 다차원 자바 스크립트 객체에 양식을 코딩. 결과는 https://github.com/serbanghita/formToObject.js입니다.

  28. 28.또 다른 대답

    또 다른 대답

    document.addEventListener ( "DOMContentLoaded"함수 () { 하여 setInterval (함수 () { VAR 양식 = document.getElementById를 ( '양식') || document.querySelector ( '형태 [NAME = "사용자 프로필"] "); . VAR JSON = Array.from (새 FormData (형태))지도 (기능 (E, I) {이 [E [0] = E [1] 이것을 반환}. 바인드 ({})) [0] ; CONSOLE.LOG (JSON) document.querySelector ( '# asJSON') 값 = JSON.stringify (JSON).; } 1000); })

    이름

    성씨

    작업

    서지 보낸

    사진

    보내기 JSON : <텍스트 영역 ID = "asJSON">

    에 https://developer.mozilla.org/en-us/docs/web/apı/formdat 님의 formdat

  29. 29.나는 사무엘 버전을 좋아하지만, 나는 그것이 작은 오류를 가지고 있다고 생각합니다. 일반적으로 JSON은 다음과 같이 전송됩니다

    나는 사무엘 버전을 좋아하지만, 나는 그것이 작은 오류를 가지고 있다고 생각합니다. 일반적으로 JSON은 다음과 같이 전송됩니다

    하지

    그래서 함수는 IMO 읽어야합니다 :

    App.toJson = function( selector ) {
    var o = {};
    $.map( $( selector ), function( n,i )
    {
        o[n.name] = $(n).val();
    });     
    return o;
}

    및 (일반적으로 예상대로도)의 데이터 배열을 마무리하고, 마지막 astring로 보내 App.stringify ({데이터 : App.toJson ( '#cropform : 입력')})

    모든-사태 덮인 버전 json2.js에서 린 버전에 대한 질문 3,593,046의 캐릭터 라인 화 표정하십시오. 즉, 모두를 포함해야한다 :

  30. 30.빠른, 현대 솔루션의 경우, JSONify jQuery 플러그인을 사용합니다. 아래의 예는 GitHub의 README에서 그대로 가져온 것입니다. Kushal 디야, 플러그인의 저자에 대한 모든 신용.

    빠른, 현대 솔루션의 경우, JSONify jQuery 플러그인을 사용합니다. 아래의 예는 GitHub의 README에서 그대로 가져온 것입니다. Kushal 디야, 플러그인의 저자에 대한 모든 신용.

    주어진:

    <form id="myform">
    <label>Name:</label>
    <input type="text" name="name"/>
    <label>Email</label>
    <input type="text" name="email"/>
    <label>Password</label>
    <input type="password" name="password"/>
</form>

    달리는:

    $('#myform').jsonify();

    생성합니다 :

    {"name":"Joe User","email":"joe@example.com","password":"mypass"}

    이 JSON 객체와 jQuery를 POST를 수행 할 경우 :

    $('#mybutton').click(function() {
    $.post('/api/user', JSON.stringify($('#myform').jsonify()));
}

    31. from https://stackoverflow.com/questions/1184624/convert-form-data-to-javascript-object-with-jquery by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] 자바 스크립트 / jQuery를 DOM 변경 리스너가 있습니까?  (0) 2020.09.21
[JQUERY] 자바 스크립트 객체의 배열에 ID를 기준으로 개체를 찾기  (0) 2020.09.21
[JQUERY] 어떻게 jQuery를 동적 HTML 요소에 이벤트를 연결합니까? [복제]  (0) 2020.09.20
[JQUERY] 모바일 장치를 감지하는 가장 좋은 방법은 무엇입니까?  (0) 2020.09.20
[JQUERY] 어떻게 요소 외부의 클릭을 감지합니까?  (0) 2020.09.20
,

티스토리툴바