Kaip konvertuoti jQuery.serialize () duomenis į JSON objektą?

Ar yra geresnis sprendimas konvertuoti formos duomenis, kurie jau buvo serializuoti pagal jQuery serialize () funkciją, kai formoje yra keli „Array“ įvesties laukai? Noriu paversti formos duomenis į JSON objektą, kad būtų atkurtos kitos informacijos lentelės. Taigi pasakykite man geriausias būdas gauti serialize eilutę, konvertuotą į JSON objektą.

 <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 metodas, naudojamas duomenims gauti

 var MyForm = $("#sampleform").serialize();  

Kaip padaryti šiuos duomenis apie JSON objektą? kurie turi turėti pirmiau minėtos formos JSON duomenis.

 { "MyName":"raf", "friendname":[ {"0":"Bily"}, {"1":"Andy"}, {"2":"Adam"} ], "friendemail":[ {"0":"bily@someemail.com"}, {"1":"Andy@somwhere.com"}, {"2":"Adam@herenthere.com"} ] } 
37
19 июля '10 в 2:20 2010-07-19 02:20 Raftalksas yra nustatytas liepos 19 d . 10 val. 2:20 2010-07-19 02:20
@ 8 atsakymai
 var formdata = $("#myform").serializeArray(); var data = {}; $(formdata ).each(function(index, obj){ data[obj.name] = obj.value; }); 

Paprasta ir greita;)

36
16 апр. Atsakyti Danilo Colasso 16 Bal 2015-04-16 17:54 '15, 17:54, 2015-04-16 17:54

Neseniai turėjau šią tikslią problemą. Iš pradžių naudojome „jQuery“ metodą serializeArray() , tačiau tai neapima formos elementų, kurie yra išjungti. Dažnai išjungsime „sinchronizuotus“ formų elementus su kitais puslapio šaltiniais, tačiau vis dar turime įtraukti duomenis į mūsų serializuotą objektą. Taigi trūksta serializeArray() . Mes naudojome :input selektorių, kad gautume visus įėjimo elementus (įjungti ir išjungti) šiame konteineryje, o tada $.map() kad sukurtume mūsų objektą.

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

Atkreipkite dėmesį, kad tam kiekvienam iš jūsų įvesties reikės name atributo, kuris bus gauto objekto nuosavybės pavadinimas.

border=0

Tiesą sakant, tai šiek tiek pasikeitė nuo to, ką naudojome. Mums reikėjo sukurti objektą, kuris buvo struktūrizuotas kaip .NET IDictionary, todėl naudojome: (pateikiu čia, jei tai naudinga)

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

Man patinka abu šie sprendimai, nes jie yra paprasta naudoti $.map() funkcija, ir jūs turite visišką valdiklį (taip, kokie elementai galiausiai įtraukti į savo rezultato objektą). Be to, nereikia papildomo papildinio. Paprastas senas jQuery.

12
19 июля '10 в 2:51 2010-07-19 02:51 atsakymą davė Samuel Meacham , liepos 19 d. 10, 02:51 2010-07-19 02:51

Naudokite jQuery.serializeJSON papildinį. Jis paverčia formas tokiu pačiu formatu, kaip ir objekto Rails objektas, kuris yra labai standartinis ir įrodytas.

7
08 янв. atsakymas duotas tothemario 08 jan. 2014-01-08 06:08 '14 at 6:08 2014-01-08 06:08

Aš naudoju šį labai mažą „jQuery“ papildinį, kurį išplėčiau „DocumentCloud“:

https://github.com/documentcloud/documentcloud/blob/master/public/javascripts/lib/jquery_extensions.js

Tai iš esmės yra dvi kodo eilutės, tačiau tam reikia _.js (Underscore.js), nes jis pagrįstas reduce funkcija.

 $.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; }, {}); } }); 

Plėtiniai:

  • Tai nėra serialize įvesties reikšmė, jei ji yra nulinė.
  • Ji gali išskirti kai kuriuos įėjimus, įvedant įvesties pavadinimų masyvą į exclude argumentą, ie ["password_confirm"]
5
25 апр. Atsakymas pateiktas SC 25 Bal. 2012-04-25 02:12 '12, 2:12 2012-04-25 02:12

Tai lygiavertis sprendimas „ Danilo Collasso“ , su paprastais ir .serializeArray() (jis dažniausiai naudoja .reduce vietoj $.each ).

Nedidelėmis pastangomis tai leidžia papildomoms funkcijoms įgyvendinti SC atsakymuose, nereikalaujant plėtinių.

 $(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 } ); 
4
21 нояб. LSerni atsakymas 21 nov. 2016-11-21 02:32 '16 at 2:32 2016-11-21 02:32

Naudojant pabraukimus ir jQuery

 var formdata = $("#myform").serializeArray(); var data = {}; _.each(formdata, function(element){ // Return all of the values of the object properties. var value = _.values(element); // name : value data[value[0]] = value[1]; }); console.log(data); //Example => {name:"alex",lastname:"amador"} 
2
19 окт. atsakymą pateikė alejandro 19 okt. 2013-10-19 07:24 '13, 07:24 am 2013-10-19 07:24

Manau, kad čia yra daug gero atsakymo, ir aš sukūriau savo funkciją remiantis šiais atsakymais.

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

Na, leiskite man paaiškinti, kodėl aš norėčiau šį sprendimą ... Jei įvedėte tą patį pavadinimą, visos reikšmės bus saugomos masyve, bet jei ne, vertė bus saugoma tiesiogiai kaip indekso reikšmė JSON ... Čia jis skiriasi nuo „ Danilo Colasso“ atsakymo , kai grąžintas JSON yra pagrįstas tik masyvo reikšmėmis ...

Taigi, jei turite formą su teksto lauku, pavadintu turiniu ir kartotiniais autoriais, ši funkcija jums bus grąžinta:

 { content : 'This is The Content', authors : [ 0: 'me', 1: 'you', 2: 'him', ] } 
0
28 дек. Atsakymą pateikė Simon Trichereau, gruodžio 28 d. 2017-12-28 12:46 '17 at 12:46 2017-12-28 12:46
 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); }); 
0
11 апр. Deepak Bansode atsakymas, pateiktas balandžio 11 d 2017-04-11 13:22 '17, 13:22 pm 2017-04-11 13:22

Kiti klausimai apie „ žymes arba Užduoti klausimą