jQuery를 serializeArray() 키 값 쌍

Question

나는 [{name:"name1",value:"value1"},{name:"name2",value:"value2"}] 쌍을 반환하는 형태

<form> 
    <input type="text" name="name1" value="value1"/> 
    <input type="text" name="name2" value="value2"/> 
</form> 

$(form).serializeArray() 

를 직렬화 약간의 문제가 있어요.

는

{name1:value1,name2:value2} 

그래서 그들은 쉽게 처리 할 수 ​​있다는 형태로 출력을 얻을 수 있습니까?

Live demo.

Answer 1

var result = { }; 
$.each($('form').serializeArray(), function() { 
    result[this.name] = this.value; 
}); 

// at this stage the result object will look as expected so you could use it 
alert('name1 = ' + result.name1 + ', name2 = ' + result.name2); 

Answer 2

new_obj = {} 

$.each($(form).serializeArray(), function(i, obj) { new_obj[obj.name] = obj.value }) 

데이터가 양식에 체크 박스 또는 라디오 버튼이없는 경우 허용 대답은 잘 작동 new_obj

Answer 3

입니다. 그것들의 그룹은 모두 같은 이름 속성을 가지기 때문에, 객체 내부에 배열 값을 생성해야합니다. 같은 HTML에 대한 그래서 :

<input type="checkbox" value="1" name="the-checkbox"> 
<input type="checkbox" value="1" name="the-checkbox"> 
<input type="checkbox" value="1" name="the-checkbox"> 

당신은 얻을 것이다 : 코드의

{the-checkbox:['1', '2', '3']} 

This 비트가 잘 모든 것을 처리합니다.

/*! 
* jQuery serializeObject - v0.2 - 1/20/2010 
* http://benalman.com/projects/jquery-misc-plugins/ 
* 
* Copyright (c) 2010 "Cowboy" Ben Alman 
* Dual licensed under the MIT and GPL licenses. 
* http://benalman.com/about/license/ 
*/ 

// Whereas .serializeArray() serializes a form into an array, .serializeObject() 
// serializes a form into an (arguably more useful) object. 

(function($,undefined){ 
    '$:nomunge'; // Used by YUI compressor. 

    $.fn.serializeObject = function(){ 
    var obj = {}; 

    $.each(this.serializeArray(), function(i,o){ 
     var n = o.name, 
     v = o.value; 

     obj[n] = obj[n] === undefined ? v 
      : $.isArray(obj[n]) ? obj[n].concat(v) 
      : [ obj[n], v ]; 
    }); 

    return obj; 
    }; 

})(jQuery); 

사용 여기

$(form).serializeObject(); 

Answer 4

$.fn.serializeObject = function() { 
    var o = {}; 
    var a = this.serializeArray(); 
    $.each(a, function() { 
     if (o[this.name] !== undefined) { 
      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; 
}; 

Answer 5

은 Hollister의 일부 코드 현대화이다.

(function($,undefined){ 
    '$:nomunge'; // Used by YUI compressor. 

    $.fn.serializeObject = function(){ 
    var obj = {}, 
     names = {}; 

    $.each(this.serializeArray(), function(i,o){ 
     var n = o.name, 
     v = o.value; 

     if (n.includes('[]')) { 
      names.n = !names.n ? 1 : names.n+1; 
      var indx = names.n - 1; 
      n = n.replace('[]', '[' + indx + ']'); 
     } 

     obj[n] = obj[n] === undefined ? v 
      : $.isArray(obj[n]) ? obj[n].concat(v) 
      : [ obj[n], v ]; 
    }); 

    return obj; 
    }; 

})(jQuery); 

확인란의 경우 필드 이름이 myvar[] 인 경우.

Answer 6

사용자 정의 기능을 만들 수 있습니다.

var complex = $(form).serialize(); // name1=value1&name2=value2 
var json = toSimpleJson(complex); // {"name1":"value1", "name2":"value2"} 

function toSimpleJson(serializedData) { 
    var ar1 = serializedData.split("&"); 
    var json = "{"; 
    for (var i = 0; i<ar1.length; i++) { 
     var ar2 = ar1[i].split("="); 
     json += i > 0 ? ", " : ""; 
     json += "\"" + ar2[0] + "\" : "; 
     json += "\"" + (ar2.length < 2 ? "" : ar2[1]) + "\""; 
    } 
    json += "}"; 
    return json; 
} 

Answer 7

은 (폼 ID)

var jsoNform = $("#form-id").serializeObject(); 

jQuery.fn.serializeObject = function() { 
    var formData = {}; 
    var formArray = this.serializeArray(); 
    for (var i = 0, n = formArray.length; i < n; ++i) 
     formData[formArray[i].name] = formArray[i].value; 
    return formData; 
};