jQuery.serialize() 데이터를 JSON 개체로 변환하려면 어떻게 해야 합니까?
jQuery 함수 serialize()에 의해 이미 시리얼화된 폼 데이터를 변환하기 위한 더 좋은 솔루션이 있습니까?폼에 여러 개의 입력 배열 필드가 포함되어 있는 경우.폼 데이터를 JSON 개체로 변환하여 다른 유용한 테이블을 다시 만들고 싶습니다.시리얼라이즈 문자열을 JSON 개체로 변환하는 더 좋은 방법을 알려주세요.
<form id='sampleform'>
<input name='MyName' type='text' /> // Raf
<!--array input fields below-->
<input name='friendname[]' type='text' /> // Bily
<input name='fiendemail[]' type='text' /> // bily@someemail.com
<!--duplicated fields below to add more friends -->
<input name='friendname[]' type='text' /> // Andy
<input name='fiendemail[]' type='text' /> // Andy@somwhere.com
<input name='friendname[]' type='text' /> // Adam
<input name='fiendemail[]' type='text' /> // Adam@herenthere.com
</form>
데이터를 가져오는 데 적용된 jquery 메서드
var MyForm = $("#sampleform").serialize();
/** result : MyName=Raf&friendname[]=Billy&fiendemail[]=bily@someemail.com&friendname[]=Andy&fiendemail[]=Andy@somwhere.com&friendname[]=Adam&fiendemail[]=Adam@herenthere.com
*/
이 데이터를 JSON 객체에 삽입하려면 어떻게 해야 합니까?위 형식의 JSON 데이터의 예를 다음에 나타냅니다.
{
"MyName":"raf",
"friendname":[
{"0":"Bily"},
{"1":"Andy"},
{"2":"Adam"}
],
"friendemail":[
{"0":"bily@someemail.com"},
{"1":"Andy@somwhere.com"},
{"2":"Adam@herenthere.com"}
]
}
var formdata = $("#myform").serializeArray();
var data = {};
$(formdata ).each(function(index, obj){
data[obj.name] = obj.value;
});
심플하고 고속화;)
을 사용하다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.serializeJ 를 사용합니다.SON 플러그인매우 표준적이고 잘 테스트된 Rails params 객체와 동일한 형식을 사용하여 양식을 변환합니다.
DocumentCloud에서 확장한 매우 작은 jQuery 플러그인을 사용하고 있습니다.
이지만, 2행의 코드에는 _가 은, 「2」의 「_.js(Undercore.js).reduce기능.
$.fn.extend({
serializeJSON: function(exclude) {
exclude || (exclude = []);
return _.reduce(this.serializeArray(), function(hash, pair) {
pair.value && !(pair.name in exclude) && (hash[pair.name] = pair.value);
return hash;
}, {});
}
});
내선번호:
- 입력 값이 null인 경우 직렬화되지 않습니다.
- 입력 이름의 배열을 에 전달함으로써 일부 입력을 제외할 수 있습니다.
exclude논쟁i.e. ["password_confirm"]
여기 좋은 답변들이 많이 있는 것 같고, 이 답변들을 바탕으로 제가 직접 기능을 만들어봤습니다.
function formToJSON(f) {
var fd = $(f).serializeArray();
var d = {};
$(fd).each(function() {
if (d[this.name] !== undefined){
if (!Array.isArray(d[this.name])) {
d[this.name] = [d[this.name]];
}
d[this.name].push(this.value);
}else{
d[this.name] = this.value;
}
});
return d;
}
//The way to use it :
$('#myForm').submit(function(){
var datas = formToJSON(this);
return false;
});
기본적으로 제가 이 솔루션을 선호하는 이유를 설명하겠습니다.같은 이름의 복수 입력이 있는 경우 모든 값이 배열에 저장되지만 그렇지 않은 경우 값은 JSON에 인덱스의 값으로 직접 저장됩니다.Danilo Colasso의 답변과 다른 점은 JSON이 반환한 것은 어레이 값뿐이라는 것입니다.
따라서 내용 및 여러 작성자가 포함된 텍스트 영역이 있는 폼이 있는 경우 이 함수는 사용자에게 반환됩니다.
{
content : 'This is The Content',
authors :
[
0: 'me',
1: 'you',
2: 'him',
]
}
Danilo Colasso와 동등한 솔루션, 장단점:.serializeArray()(이것이 사용하는 것).reduce대신$.each).
약간의 노력으로 S.C.의 응답에 추가 기능을 추가할 수 있습니다.확장은 필요 없습니다.
$(selector).serializeArray()
.reduce(function(accum, item) {
// This 'if' allows ignoring some values
if (-1 === [ 'ignoreThis', 'andThat' ].indexOf(item.name)) {
// This allows ignoring NULL values
if (item.value !== null) {
accum[item.name] = item.value;
}
}
return accum;
},
{
// By supplying some initial values, we can add defaults
// for, say, disabled form controls.
preFilledName: preFilledValue, // optional
defaultName : defaultValue // optional
}
);
ES6를 사용할 수 있다면
const obj = arr.reduce((acc, {name, value}) => ({...acc, [name]: value}), {})
시리얼 어레이는 매우 잘 동작합니다.
var formdata = $("#myform").serializeArray();
var data = {};
$(formdata ).each(function(index, obj){
if(data[obj.name] === undefined)
data[obj.name] = [];
data[obj.name].push(obj.value);
});
언더스코어 및 jQuery 사용
var formdata = $("#myform").serializeArray();
var data = {};
_.each(formdata, function(element){
// Return all of the values of the object's properties.
var value = _.values(element);
// name : value
data[value[0]] = value[1];
});
console.log(data); //Example => {name:"alex",lastname:"amador"}
축소기능의 힘으로!
$(form).serializeArray().reduce(function (output, value) {
output[value.name] = value.value
return output
}, {})
모든 기븐 앤서에도 몇 가지 문제가 있는데 바로...
어레이로 이름을 입력하는 경우name[key]단, 다음과 같이 생성됩니다.
name:{
key : value
}
예: 이런 폼을 가지고 있는 경우.
<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>
그런 다음 모든 응답과 함께 이와 같은 개체를 생성합니다.
Object {
name : 'value',
name1[key1] : 'value1',
name2[key2] : 'value2',
name3[key3] : 'value3',
}
하지만 아래와 같이 생성해야 합니다. 누구나 아래와 같이 생성하기를 원합니다.
Object {
name : 'value',
name1 : {
key1 : 'value1'
},
name2 : {
key2 : 'value2'
},
name3 : {
key2 : 'value2'
}
}
그러면 js 코드 아래에 있는 이것을 시도해 보세요.
(function($) {
$.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());
});
})(jQuery);
console.log($('form').getForm2obj());<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<form>
<input name="name" value="value">
<input name="name1[key1]" value="value1">
<input name="name2[key2]" value="value2">
<input name="name3[key3]" value="value3">
<input type="checkbox" name="name4[]" value="1" checked="checked">
<input type="checkbox" name="name4[]" value="2">
<input type="checkbox" name="name4[]" value="3">
</form>만약 당신이 ajax 요청을 사용하고 있다면, 그것을 만들 필요가 없습니다.json-object오직.$('#sampleform').serialize()뛰어난 성능을 발휘하거나 다른 목적을 가지고 있는 경우에는 다음과 같은 솔루션이 있습니다.
var formserializeArray = $("#sampleform").serializeArray();
var jsonObj = {};
jQuery.map(formserializeArray , function (n, i) {
jsonObj[n.name] = n.value;
});
JSON.stringify()를 사용하여 serialize합니다.어레이():
console.log(JSON.stringify($('#sampleform').serializeArray()));언급URL : https://stackoverflow.com/questions/3277655/how-to-convert-jquery-serialize-data-to-json-object
'source' 카테고리의 다른 글
| java.lang의 공백 JSON 문자열 값을 늘로 역직렬화하는 방법.스트링? (0) | 2023.03.02 |
|---|---|
| ReactJS 서버측 렌더링과 클라이언트측 렌더링 (0) | 2023.03.02 |
| angularjs를 사용하여 폼을 연재할 수 있는 더 효과적인 방법이 있나요? (0) | 2023.03.02 |
| javascript scrollIntoView를 부드럽게 만드는 방법 (0) | 2023.03.02 |
| Angularjs는 베스트 프랙티스를 최소화합니다. (0) | 2023.03.02 |