jQuery를 사용하여 폼 데이터를 JavaScript 개체로 변환
양식의 모든 요소를 JavaScript 개체로 변환하려면 어떻게 해야 합니까?
각 요소를 루프하지 않고 폼에서 JavaScript 객체를 자동으로 빌드할 수 있는 방법을 원합니다.은 필요 없다.$('#formid').serialize(); 않다.$('#formid').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;
}
실제 입력과 이름이 같은 숨겨진 필드는 덮어쓰기되므로 주의하십시오.
보스처럼 폼을 JSON으로 변환
$ bower install jquery-sysize-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();
마법 (JavaScript)
(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);
문제:
var data = {};
$(".form-selector").serializeArray().map(function(x){data[x.name] = x.value;});
토바이어스 코헨은 '가짜'와 같은 합니다.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
사용하는 것을 좋아합니다.Array.prototype.reduce원라이너이기 때문에 Underscore.js 등에 의존하지 않습니다.
$('#formid').serializeArray()
.reduce(function(a, x) { a[x.name] = x.value; return a; }, {});
하다, 하다, 하다, 하다, 하다, 하다와 .Array.prototype.map그러나 추가 개체 변수를 사용하여 범위를 복잡하게 만들 필요는 없습니다.원스톱 쇼핑.
중요사항: 입력이 중복된 폼name속성은 유효한 HTML이며 실제로는 일반적인 접근법입니다.이 경우 개체 키가 고유해야 하므로 이 스레드에 있는 응답 중 하나를 사용하는 것은 적절하지 않습니다.
[업데이트 2020]
fromEntries를 활용하는 바닐라 js의 심플한 oneliner를 사용하면 다음과 같이 됩니다(항상 브라우저 지원을 확인하십시오).
Object.fromEntries(new FormData(form))
이 모든 답변들이 내게는 너무 지나쳐 보였다.간단하다고 할 수 있는 것이 있다.모든 양식 입력에 이름 속성이 설정되어 있으면 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 (e.g. JSON.stringify?) });
각각의 요소를 검토하지 않고서는 이 작업을 수행할 수 없습니다.꼭 알고 싶은 것은 "폼을 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;
}
가 있는 했는데, 로 되어 , '아예' 입니다.입력명이 배열로 되어 있는 경우는 다음과 같습니다.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>Underscore.js 를 사용하고 있는 경우는, 다음의 비교적 간결한 문자를 사용할 수 있습니다.
_.object(_.map($('#myform').serializeArray(), _.values))
네, 이 질문에 대한 답변이 이미 높긴 하지만, 최근에 또 다른 비슷한 질문이 있어서 저도 이 질문을 하게 되었습니다.솔루션도 제안하고 싶습니다.이러한 솔루션은, 인정되고 있는 솔루션보다 우위성이 있기 때문입니다.비활성화된 폼 요소를 포함할 수 있습니다(UI의 작동 방식에 따라 중요할 수 있음).
jQuery를 사용하고 .serializeArray()메서드는 사용할 수 없는 폼 요소는 포함되지 않습니다.페이지의 다른 소스에 대해 "sync'd" 폼 요소를 비활성화하는 경우가 많습니다만, 그래도 시리얼화된 오브젝트에 데이터를 포함해야 합니다. ★★★★★★★★★★★★★★★★★.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 Idirectionary를 사용하고 있기 때문에, 다음과 같이 했습니다. (이것이 도움이 될 경우에 대비해 여기에 기재합니다.)
var obj = $.map(inputs, function(n, i)
{
return { Key: n.name, Value: $(n).val() };
});
console.log(obj);
는 이 두 방법을 모두 . 이 두 가지 입니다.왜냐하면 이 솔루션들은 단순한 용도가 되기 때문입니다.$.map()기능을 통해 셀렉터를 완전히 제어할 수 있습니다(따라서 결과 객체에 포함할 요소).또한 추가 플러그인은 필요하지 않습니다.jQuery (jQuery 。
이 함수는 같은 이름의 여러 요소와 함께 다차원 배열을 처리해야 합니다.
지금까지 몇 년 동안 사용하고 있습니다.
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;
};
원라이너의존관계 는 "jQuery"에 합니다.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" }
프로그레시브 웹 앱에 적합(일반 양식 제출 작업 및 Ajax 요청을 쉽게 지원할 수 있음)
다음과 같이 할 수 있습니다.
var frm = $(document.myform);
var data = JSON.stringify(frm.serializeArray());
「JSON」을 참조해 주세요.
용도:
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"}
몇 가지 오래된 답변에서:
$('form input, form select').toArray().reduce(function(m,e){m[e.name] = $(e).val(); return m;},{})
Tobias Cohen의 코드에 문제가 있다는 것을 알게 되었습니다(직접 코멘트를 할 수 있는 포인트는 없습니다).그 이외의 경우에는 문제가 없습니다.같은 이름의 선택 옵션이 2개 있는 경우, 둘 다 value=selected이면 원래 코드는 "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;
};
여기서는 심플함이 최고입니다.간단한 스트링 교환을 정규 표현으로 사용했는데, 지금까지는 매우 효과가 있었습니다.저는 정규 표현 전문가는 아니지만 매우 복잡한 물체도 채울 수 있을 것입니다.
var values = $(this).serialize(),
attributes = {};
values.replace(/([^&]+)=([^&]*)/g, function (match, name, value) {
attributes[name] = value;
});
const formData = new FormData(form);
let formDataJSON = {};
for (const [key, value] of formData.entries()) {
formDataJSON[key] = value;
}
machek의 솔루션을 사용하여 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" />
jQuery, jquery.serializeJ에 대해서만 이를 수행하는 플러그인이 있습니다.SON. 이제 몇 가지 프로젝트에서 성공적으로 사용하였습니다.그것은 마법처럼 작용한다.
이 문제에 대해 제가 찾은 가장 간단하고 정확한 방법은 bbq 플러그인이나 이 플러그인(약 0.5K바이트 크기)을 사용하는 것입니다.
다차원 어레이에서도 사용할 수 있습니다.
$.fn.serializeObject = function()
{
return $.deparam(this.serialize());
};또 다른 답변
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>폼 데이터: https://developer.mozilla.org/en-US/docs/Web/API/FormData
이 접근방식을 선호하는 이유는 2개 이상의 컬렉션을 반복할 필요가 없기 때문에 필요에 따라 "name"과 "value" 이외의 것을 얻을 수 있으며 오브젝트에 저장하기 전에 값을 삭제할 수 있기 때문입니다(예를 들어 저장하지 않는 기본값이 있는 경우).
$.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에서만 테스트 완료.
여기 리덕션을 사용하는 원라이너가 있습니다.Reduce는 전달된 함수의 반환값을 목록의 n번째 값과 함께 다음 반복에서 전달된 함수로 되돌리는 함수입니다.
$('#formid').serializeArray().reduce((o,p) => ({...o, [p.name]: p.value}))
이 기능을 이용하려면 몇 가지 방법을 사용해야 합니다.
...o( spread 구문)는 모든 명령어를key: value의 쌍o- .
()와 the the the the{}을 것 - 를 감습니다(키키)
p.name의 in ) ) 。[]
한 라이너에서 ES6의 장점을 활용:
$("form").serializeArray().reduce((o, {name: n, value: v}) => Object.assign(o, { [n]: v }), {});
저는 사무엘 버전을 좋아하지만 오류가 조금 있는 것 같습니다.통상, 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을 참조해 주십시오.lean 버전에 대해서는 질문 3593046, every eventability에 대해서는 json2.js를 참조해 주십시오.이것으로 모든 것을 커버할 수 있습니다. : )
어떤 것이든 오브젝트로 변환한다(유닛 테스트 없음)
<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 } }
빠르고 현대적인 솔루션을 사용하려면 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()));
}
선택한 솔루션에 문제가 있습니다.
배열 기반 이름을 가진 폼을 사용할 경우 jQuery serializeArray() 함수는 실제로 소멸합니다.
어레이 기반의 필드명을 사용하는 PHP 프레임워크를 사용하고 있기 때문에, 같은 폼을 같은 페이지에 여러 번 표시할 수 있습니다.이렇게 하면 양식 모델이 충돌하지 않고 추가, 편집 및 삭제를 모두 같은 페이지에 표시할 수 있습니다.
이 절대 기본 기능을 꺼내지 않고 폼을 seralize하고 싶었기 때문에 seralize를 직접 쓰기로 했습니다.어레이():
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 등이 발생할 수 있습니다.
언급URL : https://stackoverflow.com/questions/1184624/convert-form-data-to-javascript-object-with-jquery
'programing' 카테고리의 다른 글
| MySQL의 BIT와 TINYINT의 차이점은 무엇입니까? (0) | 2022.12.20 |
|---|---|
| MySql에서 아포스트로피(')를 이스케이프하는 방법 (0) | 2022.12.20 |
| 스프링 부트: 로컬 호스트의 REST 컨트롤러에 액세스할 수 없음(404) (0) | 2022.12.20 |
| inversedBy와 mappedBy의 차이점은 무엇입니까? (0) | 2022.12.10 |
| Larabel 5.1에서 원시 쿼리를 실행하는 방법 (0) | 2022.12.10 |