jQuery를 사용하여 양식 데이터를 JavaScript 객체로 변환

질문자 :Community Wiki

양식의 모든 요소를 JavaScript 객체로 어떻게 변환합니까?

각 요소를 반복할 필요 없이 내 양식에서 JavaScript 개체를 자동으로 빌드하는 방법을 갖고 싶습니다. $('#formid').serialize(); $('#formid').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; }

실제 입력과 이름이 같은 숨겨진 필드는 덮어쓰게 되므로 주의하십시오.

Community Wiki

보스처럼 양식을 JSON으로 변환

---

현재 소스는 GitHub 및 Bower에 있습니다.

$ bower jquery-serialize-object 설치

---

다음 코드는 이제 더 이상 사용되지 않습니다 .

다음 코드는 모든 종류의 입력 이름으로 작업할 수 있습니다. 예상대로 처리하십시오.

예를 들어:

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

Community Wiki

무엇이 문제인가:

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

Community Wiki

Tobias Cohen 솔루션의 고정 버전. 0 및 '' 와 같은 잘못된 값을 올바르게 처리합니다.

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

코딩 편의를 위한 CoffeeScript 버전:

 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

Community Wiki

Array.prototype.reduce 사용하는 것을 좋아합니다. 한 줄짜리이며 Underscore.js 등에 의존하지 않기 때문입니다.

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

Array.prototype.map 사용한 답변과 유사하지만 추가 개체 변수로 범위를 어지럽힐 필요가 없습니다. 원스톱 쇼핑.

중요 참고 사항 name 속성이 있는 입력이 있는 양식은 유효한 HTML이며 실제로 일반적인 접근 방식입니다. 이 스레드의 답변 중 하나를 사용하는 것은 이 경우 부적절합니다(객체 키가 고유해야 하기 때문에).

Community Wiki

이 모든 대답이 나에게는 너무 과한 것 같았습니다. 단순함을 위해 할 말이 있습니다. 모든 양식 입력에 name 속성이 설정되어 있는 한 이것은 jim dandy에서만 작동합니다.

 $('form.myform').submit(function () { var $this = $(this) , viewArr = $this.serializeArray() , view = {}; for (var i in viewArr) { view[viewArr[i].name] = viewArr[i].value; } //Do stuff with view object here (eg JSON.stringify?) });

Community Wiki

[2020년 업데이트]

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

 Object.fromEntries(new FormData(form))

Community Wiki

각 요소를 검사하지 않고는 이 작업을 수행할 방법이 없습니다. 정말로 알고 싶은 것은 "다른 사람이 이미 양식을 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; }

Community Wiki

다른 모든 답변에 문제가 있는지 확인했습니다. 입력 이름이 name[key] 와 같은 배열인 경우 다음과 같이 생성되어야 합니다.

name:{ key : value }

---

예: 아래와 유사한 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 = function() { var _ = {}; $.map(this.serializeArray(), function(n) { const keys = n.name.match(/[a-zA-Z0-9_]+|(?=\[\])/g); if (keys.length > 1) { let tmp = _; pop = keys.pop(); for (let i = 0; i < keys.length, j = keys[i]; i++) { tmp[j] = (!tmp[j] ? (pop == '') ? [] : {} : tmp[j]), tmp = tmp[j]; } if (pop == '') tmp = (!Array.isArray(tmp) ? [] : tmp), tmp.push(n.value); else tmp[pop] = n.value; } else _[keys.pop()] = n.value; }); return _; } console.log($('form').getForm2obj()); $('form input').change(function() { console.clear(); console.log($('form').getForm2obj()); });

 <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <form> <input name="name" value="value"> <input type="checkbox" name="name1[]" value="1" checked="checked">1 <input type="checkbox" name="name1[]" value="2">2 <input type="checkbox" name="name1[]" value="3">3<br> <input type="radio" name="gender" value="male" checked="checked">male <input type="radio" name="gender" value="female"> female <input name="name2[key1]" value="value1"> <input name="one[another][another_one]" value="value4"> <input name="name3[1][name]" value="value4"> <input name="name3[2][name]" value="value4"> <input name="[]" value="value5"> </form>

Community Wiki

Underscore.js 를 사용하는 경우 비교적 간결하게 사용할 수 있습니다.

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

Community Wiki

좋아, 나는 이것이 이미 높은 투표를 받은 답변을 가지고 있다는 것을 알고 있지만 최근에 또 다른 유사한 질문이 제기되었고 나도 이 질문에 대해 지시받았습니다. 허용된 솔루션보다 이점을 제공하기 때문에 내 솔루션도 제공하고 싶습니다. 비활성화된 양식 요소를 포함할 수 있습니다(UI 기능 방식에 따라 때때로 중요함).

다음은 다른 SO 질문의 답변입니다 .

처음에는 jQuery의 serializeArray() 메서드를 사용했지만 비활성화된 양식 요소는 포함하지 않습니다. 페이지의 다른 소스에 "동기화"된 양식 요소를 비활성화하는 경우가 많지만 직렬화된 개체에 데이터를 포함해야 합니다. 따라서 serializeArray() 가 종료됩니다. :input 선택기를 사용하여 주어진 컨테이너의 모든 입력 요소(활성화 및 비활성화)를 가져온 다음 $.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);

$.map() 함수를 간단하게 사용하고 선택기를 완벽하게 제어할 수 있기 때문에 이 두 솔루션이 모두 마음에 듭니다. 또한 추가 플러그인이 필요하지 않습니다. 평범한 오래된 jQuery.

Community Wiki

이 함수는 같은 이름을 가진 여러 요소와 함께 다차원 배열을 처리해야 합니다.

나는 지금까지 몇 년 동안 그것을 사용하고 있습니다.

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

Community Wiki

다음과 같이 할 수 있습니다.

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

JSON을 참조하십시오.

Community Wiki

map 메서드에 전달된 함수에 대해 고정 개체 바인딩을 사용합니다.

 $('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" }

프로그레시브 웹 앱에 적합(일반 양식 제출 작업과 아약스 요청을 모두 쉽게 지원할 수 있음)

Community Wiki

사용하다:

 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"}

Community Wiki

일부 오래된 답변에서 :

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

Community Wiki

Tobias Cohen의 코드에 문제가 있음을 발견했습니다(직접 설명할 요점이 충분하지 않음). 그렇지 않으면 저에게 효과적입니다. 같은 이름을 가진 두 개의 선택 옵션이 있고 둘 다 value=""인 경우 원래 코드는 "name":["",""] 대신 "name":""을 생성합니다.

첫 번째 if 조건에 " || 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; };

Community Wiki

단순함이 여기에서 가장 좋습니다. 나는 정규 표현식으로 간단한 문자열 바꾸기를 사용했으며 지금까지 매력처럼 작동했습니다. 저는 정규식 전문가는 아니지만 매우 복잡한 개체도 채울 수 있습니다.

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

Community Wiki

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" />

Community Wiki

const formData = new FormData(form); let formDataJSON = {}; for (const [key, value] of formData.entries()) { formDataJSON[key] = value; }

Community Wiki

jQuery, jquery.serializeJSON 을 위한 플러그인이 있습니다. 지금은 몇 가지 프로젝트에서 성공적으로 사용했습니다. 그것은 매력처럼 작동합니다.

Community Wiki

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

다차원 배열에서도 작동합니다.

 $.fn.serializeObject = function() { return $.deparam(this.serialize()); };

Community Wiki

또 다른 대답

 document.addEventListener("DOMContentLoaded", function() { setInterval(function() { var form = document.getElementById('form') || document.querySelector('form[name="userprofile"]'); var json = Array.from(new FormData(form)).map(function(e,i) {this[e[0]]=e[1]; return this;}.bind({}))[0]; console.log(json) document.querySelector('#asJSON').value = JSON.stringify(json); }, 1000); })

 <form name="userprofile" id="form"> <p>Name <input type="text" name="firstname" value="John"/></p> <p>Family name <input name="lastname" value="Smith"/></p> <p>Work <input name="employment[name]" value="inc, Inc."/></p> <p>Works since <input name="employment[since]" value="2017" /></p> <p>Photo <input type="file" /></p> <p>Send <input type="submit" /></p> </form> JSON: <textarea id="asJSON"></textarea>

FormData: https://developer.mozilla.org/en-US/docs/Web/API/FormData

Community Wiki

이 접근 방식을 선호하는 이유는 다음과 같습니다. 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"));

Firefox에서만 테스트되었습니다.

Community Wiki

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

{"coreSKU":"PCGUYJS","name_de":"무엇이든",...

다음과 같이

[{"coreSKU":"PCGUYJS"},{"name_de":"무엇이든"},...

따라서 함수 IMO는 다음을 읽어야 합니다.

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

데이터 배열로 래핑하고(일반적으로 예상되는 대로) 마지막으로 astring App.stringify( {data:App.toJson( '#cropform :input' )} )로 보냅니다.

stringify는 린 버전의 경우 질문 3593046 을, 모든 사건이 포함된 버전의 경우 json2.js를 참조하세요. 그것은 모든 것을 커버해야합니다 :)

Community Wiki

무엇이든 객체로 변환(단위 테스트되지 않음)

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

Community Wiki

빠르고 현대적인 솔루션을 위해 JSONify jQuery 플러그인을 사용하세요. 아래 예는 GitHub README에서 그대로 가져왔습니다. 모든 크레딧은 플러그인 작성자인 Kushal Pandya에게 있습니다.

주어진:

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

Community Wiki

선택한 솔루션에 문제가 있습니다.

배열 기반 이름이 있는 양식을 사용할 때 jQuery serializeArray() 함수는 실제로 죽습니다.

배열 기반 필드 이름을 사용하여 동일한 양식을 여러 보기에서 동일한 페이지에 여러 번 넣을 수 있도록 하는 PHP 프레임워크가 있습니다. 이것은 충돌하는 양식 모델 없이 동일한 페이지에 추가, 편집 및 삭제를 모두 배치하는 데 편리할 수 있습니다.

이 절대적인 기본 기능을 제거하지 않고 양식을 직렬화하고 싶었기 때문에 고유한 seralizeArray()를 작성하기로 결정했습니다.

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

참고: 이는 양식 submit() 외부에서도 작동하므로 코드의 나머지 부분에서 오류가 발생하면 "변경 사항 저장"이라는 링크 버튼에 배치하면 양식이 제출되지 않습니다.

또한 이 함수는 유효성 검사를 위해 서버 측에 보낼 데이터를 수집하는 용도로만 양식 유효성을 검사하는 데 사용해서는 안 됩니다. 이러한 약하고 대량 할당된 코드를 사용하면 XSS 등이 발생합니다.

Community Wiki

나는 최근에 같은 문제가 있었고 양식을 동일한 구조의 JSON 객체로 변환하는 이 .toJSON jQuery 플러그인을 출시했습니다. 이것은 또한 사용자가 특정 위치에 더 많은 필드를 추가할 수 있도록 하려는 동적으로 생성된 양식에 특히 유용합니다.

요점은 실제로 자체 구조를 갖도록 양식을 만들고 싶을 수 있으므로 사용자가 도시에서 좋아하는 장소를 삽입하는 양식을 만들고 싶다고 가정해 보겠습니다. 이 양식이 <places>...</places> 사용자가 좋아하는 장소 목록을 포함하는 XML 요소, 따라서 각각은 예를 들어 <name>...</name> 요소를 <place>...</place> <type>...</type> 요소와 해당 장소에서 수행할 수 있는 활동을 나타내는 <activity>...</activity> 따라서 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 객체가 있으면 얼마나 좋을까? 다음 중 하나를 할 수 있습니다.

• CouchDB 와 같은 데이터베이스에 있는 그대로 이 객체를 저장합니다.
• $_POST[] 서버 측에서 읽고 의미적으로 조작할 수 있는 올바르게 중첩된 배열을 검색합니다.
• 일부 서버 측 스크립트를 사용하여 올바른 형식의 XML 파일로 변환합니다(선험적으로 정확한 구조를 모르는 경우에도).
• Node.js 와 같은 서버 스크립트에서 그대로 사용하십시오.

자, 이제 양식이 XML 파일을 표현하는 방법을 생각해야 합니다.

물론 <form> 태그는 root 이지만 <place> 요소가 있으므로 입력 태그를 사용할 수 없습니다.

여기에서 <fieldset> 태그가 유용합니다! <fieldset> 태그를 사용하여 양식/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>

이 형식에서 볼 수 있듯이 고유한 이름의 규칙을 어기고 있지만 요소 배열로 변환되어 배열 내부의 인덱스로만 참조되기 때문에 괜찮습니다.

이 시점 name="array[]" 가 없고 모든 것이 예쁘고 단순하며 의미가 있음을 알 수 있습니다.

이제 이 양식이 다음과 같은 JSON 객체로 변환되기를 원합니다.

 {'places':{ 'place':[ { 'name': 'Home', 'type': 'dwelling', 'activity':[ 'sleep', 'eat', 'watch TV' ] }, {...}, {...} ] }}

이를 위해 누군가가 이 Code Review 스레드 에서 최적화하는 데 도움을 준 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 객체로 변환하는 것은 시도해 볼 가치가 있으며, 동적으로 생성된 양식 데이터를 검색해야 하는 경우 걱정 없이 동일한 이름의 입력 태그를 추가할 수 있다는 사실은 매우 유용합니다.

이것이 누군가를 돕기를 바랍니다!

Community Wiki

프로덕션에서 사용하기 위해 다차원 JavaScript 개체에 양식을 직접 코딩했습니다. 결과는 https://github.com/serbanghita/formToObject.js 입니다.

Community Wiki

출처 : http:www.stackoverflow.com/questions/1184624/convert-form-data-to-javascript-object-with-jquery