Formos duomenų konvertavimas į „JavaScript“ objektą naudojant „jQuery“

Kaip konvertuoti visus mano formos elementus į „JavaScript“ objektą?

Norėčiau turėti būdą, kaip automatiškai sukurti „JavaScript“ objektą iš mano formos, nereikia kartoti per kiekvieną elementą. Nereikia eilutės, kurią grąžino $('#formid').serialize(); ir man nereikia žemėlapio, kurį grąžino $('#formid').serializeArray();

1503
26 июля '09 в 16:39 2009-07-26 16:39 Yisroel paklausė liepos 26 d., 09:39, 2009-07-26 16:39
ответ 51 atsakymas
  • 1
  • 2

Jei norite paversti formą į javascript objektą, tada paprasčiausias sprendimas (šiuo metu) yra naudoti funkcinius metodus jQuery ir serializeArray .

 $.fn.serializeObject = function() { var form = {}; $.each($(this).serializeArray(), function (i, field) { form[field.name] = field.value || ""; }); return form; }; 

Įskiepis yra talpinamas „github“:
https://github.com/tfmontague/form-object/blob/master/README.md

Galima įdiegti su „Bower“:
bower install git://github.com/tfmontague/form-object.git

1
31 мая '15 в 10:13 2015-05-31 10:13 atsakymas pateikiamas tfmontague gegužės 31 d., 15 val. 10:13 2015-05-31 10:13

Jei pateikiate formą su JSON, siunčiant eilutę turite ištrinti []. Tai galite padaryti naudodami jQuery serializeObject () funkciją:

border=0
 var frm = $(document.myform); var data = JSON.stringify(frm.serializeObject()); $.fn.serializeObject = function() { var o = {}; //var a = this.serializeArray(); $(this).find('input[type="hidden"], input[type="text"], input[type="password"], input[type="checkbox"]:checked, input[type="radio"]:checked, select').each(function() { if ($(this).attr('type') == 'hidden') { //If checkbox is checked do not take the hidden field var $parent = $(this).parent(); var $chb = $parent.find('input[type="checkbox"][name="' + this.name.replace(/\[/g, '\[').replace(/\]/g, '\]') + '"]'); if ($chb != null) { if ($chb.prop('checked')) return; } } if (this.name === null || this.name === undefined || this.name === '') return; var elemValue = null; if ($(this).is('select')) elemValue = $(this).find('option:selected').val(); else elemValue = this.value; if (o[this.name] !== undefined) { if (!o[this.name].push) { o[this.name] = [o[this.name]]; } o[this.name].push(elemValue || ''); } else { o[this.name] = elemValue || ''; } }); return o; } 
1
07 апр. Harini Sekar atsakymas 07 Bal 2014-04-07 13:44 '14, 13:44 2014-04-07 13:44

Aš nenaudosiu jos realioje svetainėje dėl XSS atakų ir tikriausiai daug kitų problemų, tačiau čia yra greitas pavyzdys, ką galėtumėte padaryti:

 $("#myform").submit(function(){ var arr = $(this).serializeArray(); var json = ""; jQuery.each(arr, function(){ jQuery.each(this, function(i, val){ if (i=="name") { json += '"' + val + '":'; } else if (i=="value") { json += '"' + val.replace(/"/g, '\\"') + '",'; } }); }); json = "{" + json.substring(0, json.length - 1) + "}"; // do something with json return false; }); 
1
27 июля '09 в 6:04 2009-07-27 06:04 Atsakymą pateikė Jason Berry , liepos 27 d., 09:04, 2009-07-27 06:04

Taigi, aš naudoju priimtą atsakymą ir nustatiau didelį trūkumą.
Jis nepalaiko įvesties masyvų, tokių kaip:

 <input type="checkbox" name="array[]" value="1"/> <input type="checkbox" name="array[]" value="2"/> <input type="checkbox" name="array[]" value="3"/> 

Šis nedidelis pakeitimas turėtų išspręsti šią problemą:

 function objectifyForm(inp){ var rObject = {}; for (var i = 0; i < inp.length; i++){ if(inp[i]['name'].substr(inp[i]['name'].length - 2) == "[]"){ var tmp = inp[i]['name'].substr(0, inp[i]['name'].length-2); if(Array.isArray(rObject[tmp])){ rObject[tmp].push(inp[i]['value']); } else{ rObject[tmp] = []; rObject[tmp].push(inp[i]['value']); } } else{ rObject[inp[i]['name']] = inp[i]['value']; } } return rObject; } 

Nepamirškite perduoti išvesties iš $(this).serializeArray(); kitaip jis neveiks.

1
08 окт. Folkmann atsakymas, pateiktas spalio 8 d 2017-10-08 16:59 '17, 16:59 pm 2017-10-08 16:59
 const formData = new FormData(form); let formDataJSON = {}; for (const [key, value] of formData.entries()) { formDataJSON[key] = value; } 
0
24 мая '18 в 23:42 2018-05-24 23:42 atsakymą pateikė Stonetip , gegužės 24 d., 18 val. 23:42 2018-05-24 23:42

Šis sprendimas yra geresnis. Kai kurios populiaresnės parinktys čia nekoreguoja žymės >

  getData: function(element){ //@todo may need additional logic for radio buttons var select = $(element).find('select'); var input = $(element).find('input'); var inputs = $.merge(select,input); var data = {}; //console.log(input,'input'); $.each(inputs,function(){ if($(this).attr('type') != undefined){ switch($(this).attr('type')){ case 'checkbox': data[$(this).attr('name')] = ( ($(this).attr('checked') == 'checked') ? $(this).val():0 ); break; default: data[$(this).attr('name')] = $(this).val(); break; } } else{ data[$(this).attr('name')] = $(this).val(); } }) return data; } 
0
09 дек. atsakymas pateikiamas cnizzardini 09 dec. 2012-12-09 21:47 '12 at 21:47 2012-12-09 21:47

Aš parašiau jQuery jsForm modulį, kuris gali atlikti šį dvikryptį net ir gana sudėtingoms formoms (tai leidžia jums sukurti ir kitas sudėtingesnes struktūras).

Jis naudoja laukų pavadinimą (ir keletą specialių kolekcijų klasių) ir atitinka JSON objektą. Jis leidžia automatiškai replikuoti DOM elementus kolekcijoms ir duomenų apdorojimui:

 <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="https://raw.github.com/corinis/jsForm/master/src/jquery.jsForm.js"></script> <script> $(function(){ // Some JSON data var jsonData = { name: "TestName", // Standard inputs description: "long Description\nMultiline", // Textarea links: [{href:'http://stackoverflow.com',description:'StackOverflow'}, {href:'http://www.github.com', description:'GitHub'}], // Lists active: true, // Checkbox state: "VISIBLE" // Selects (enums) }; // Initialize the form, prefix is optional and defaults to data $("#details").jsForm({ data:jsonData }); $("#show").click(function() { // Show the JSON data alert(JSON.stringify($("#details").jsForm("get"), null, " ")); }); }); </script> </head> <body> <h1>Simpel Form Test</h1> <div id="details"> Name: <input name="data.name"/><br/> <input type="checkbox" name="data.active"/> active<br/> <textarea name="data.description"></textarea><br/> <select name="data.state"> <option value="VISIBLE">visible</option> <option value="IMPORTANT">important</option> <option value="HIDDEN">hidden</option> </select> <fieldset> <legend>Links</legend> <ul class="collection" data-field="data.links"> <li><span class="field">links.description</span> Link: <input name="links.href"/> <button class="delete">x</button></li> </ul> </fieldset> <button class="add" data-field="data.links">add a link</button><br/> Additional field: <input name="data.addedField"/> </div> <button id="show">Show Object</button> </body> </html> 
0
06 окт. Atsakyti Niko Oct 6 2013-10-06 10:53 '13, 10:53, 2013-10-06 10:53

Serializavimo funkcija priima JSON objektą kaip parametrą ir grąžina eilutės serializaciją.

 function serialize(object) { var _SPECIAL_CHARS = /[\\\"\x00-\x1f\x7f-\x9f\u00ad\u0600-\u0604\u070f\u17b4\u17b5\u200c-\u200f\u2028-\u202f\u2060-\u206f\ufeff\ufff0-\uffff]/g, _CHARS = { '\b' : '\\b', '\t' : '\\t', '\n' : '\\n', '\f' : '\\f', '\r' : '\\r', '"' : '\\"', '\\' : '\\\\' }, EMPTY = '', OPEN_O = '{', CLOSE_O = '}', OPEN_A = '[', CLOSE_A = ']', COMMA = ',', COMMA_CR = ",\n", CR = "\n", COLON = ':', space = "", COLON_SP = ': ', stack = [], QUOTE = '"'; function _char(c) { if (!_CHARS[c]) { _CHARS[c] = '\\u' + ('0000' + (+(c.charCodeAt(0))).toString(16)) .slice(-4); } return _CHARS[c]; } function _string(s) { return QUOTE + s.replace(_SPECIAL_CHARS, _char) + QUOTE; // return str.replace('\"','').replace('\"',''); } function serialize(h, key) { var value = h[key], a = [], colon = ":", arr, i, keys, t, k, v; arr = value instanceof Array; stack.push(value); keys = value; i = 0; t = typeof value; switch (t) { case "object" : if(value==null){ return null; } break; case "string" : return _string(value); case "number" : return isFinite(value) ? value + EMPTY : NULL; case "boolean" : return value + EMPTY; case "null" : return null; default : return undefined; } arr = value.length === undefined ? false : true; if (arr) { // Array for (i = value.length - 1; i >= 0; --i) { a[i] = serialize(value, i) || NULL; } } else { // Object i = 0; for (k in keys) { if (keys.hasOwnProperty(k)) { v = serialize(value, k); if (v) { a[i++] = _string(k) + colon + v; } } } } stack.pop(); if (space  a.length) { return arr ? "[" + _indent(a.join(COMMA_CR), space) + "\n]" : "{\n" + _indent(a.join(COMMA_CR), space) + "\n}"; } else { return arr ? "[" + a.join(COMMA) + "]" : "{" + a.join(COMMA) + "}"; } } return serialize({ "" : object }, ""); } 
0
16 окт. Anoopo spalio 16 d. atsakymas . 2011-10-16 22:30 '11 10:30 val. 2011-10-16 22:30

Neseniai turėjau tą pačią problemą, todėl sukūriau funkciją, kuri leidžia analizuoti formos elementus, kad gautumėte valdymo ID / vertę ir konvertuotų jį į JSON.

Tai pakankamai lanksti, kad būtų galima papildomai kontroliuoti. Jums tereikia nurodyti valdymo tipą ir atributą, kurį norite interpretuoti kaip vertę.

Čia galite rasti visą scenarijų .

Privalumas yra tas, kad jis užtrunka tik reikiamus duomenis, netraukdami viso objekto.

Trūkumas yra tas, kad jei turite įdėtus parametrus, jums reikia atitinkamai identifikatoriaus prefikso, kad galėtumėte naudoti savo konkrečios grupės dublikato parinktį.

Tikiuosi, kad tai padės!

0
24 окт. Spalio 24 d. Atsakymą pateikė Florin Mircea . 2014-10-24 13:21 '14, 13:21 pm 2014-10-24 13:21

Čia yra ne „JQuery“:

  var getFormData = function(form) { //Ignore the submit button var elements = Array.prototype.filter.call(form.elements, function(element) { var type = element.getAttribute('type'); return !type || type.toLowerCase() !== 'submit'; }); 

Ją galite naudoti taip:

 function() { var getFormData = function(form) { //Ignore the submit button var elements = Array.prototype.filter.call(form.elements, function(element) { var type = element.getAttribute('type'); return !type || type.toLowerCase() !== 'submit'; }); //Make an object out of the form data: {name: value} var data = elements.reduce(function(data, element) { data[element.name] = element.value; return data; }, {}); return data; }; var post = function(action, data, callback) { var request = new XMLHttpRequest(); request.onload = callback; request.open('post', action); request.setRequestHeader("Content-Type", "application/json;charset=UTF-8"); request.send(JSON.stringify(data), true); request.send(); }; var submit = function(e) { e.preventDefault(); var form = e.target; var action = form.action; var data = getFormData(form); //change the third argument in order to do something //more intersting with the response than just print it post(action, data, console.log.bind(console)); } //change formName below document.formName.onsubmit = submit; })(); 
0
28 июля '15 в 5:18 2015-07-28 05:18 atsakymą pateikė Max Heiber, liepos 28 d., 15 val., 5:18, 2015-07-28 05:18

Šiuolaikiškesnis būdas yra naudoti serializeArray() naudojant serializeArray() :

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

Tai padės daugeliui „įprastų“ atvejų.

Labai dažnas atvejis, kai yra keli žymenys su dvigubo name atributais, to nepakanka.

Kadangi įvestys su dviem egzempliorių name paprastai randamos tam tikro voko ( div , ul , tr , ...) viduje, kaip šiame pavyzdyje:

  <div class="wrapperClass"> <input type="text" name="one"> <input type="text" name="two"> </div> <div class="wrapperClass"> <input type="text" name="one"> <input type="text" name="two"> </div> 

Galite naudoti santrumpas su map operatoriumi, kad galėtumėte juos kartoti:

 $(".wrapperClass").map(function () { return $(this).find('*').serializeArray() .reduce((a, x) => ({ ...a, [x.name]: x.value }), {}); }).get(); 

Rezultatas bus objektų masyvas tokiu formatu:

  [ { one: valueOfOne, two: valueOfTwo }, { one: valueOfOne, two: valueOfTwo } ] 

.get() operatorius naudojamas kartu su map kad būtų gautas bazinis masyvas vietoj „jQuery“ objekto, kuris suteikia švaresnį rezultatą. JQuery dokumentai

0
22 марта '18 в 16:33 2018-03-22 16:33 atsakymą pateikė vartotojo3658510 kovo 22 d. 18:33 val. 2018-03-22 16:33

Turėjau beprasmiškai išlaikyti savo formos biblioteką.

transForm.js

Tai yra dalykai, kaip serializacija, deserializacija, valymas ir formų pateikimas.

Priežastis, dėl kurios aš tai padariau, yra tai, kad form2js / js2form nėra palaikomas ir nėra toks lankstus ir greitas, kaip norėtume. Mes naudojame jį gamyboje, nes tai yra form2js / js2form.

0
17 апр. Atsakyti A1rPun balandžio 17 2015-04-17 17:53 '15, 17:53, 2015-04-17 17:53

Naudokite $ ('# formName'). serializeObject ()

0
19 марта '14 в 22:56 2014-03-19 22:56 atsakymą pateikė masterwok kovo 19, 14, 22:56 2014-03-19 22:56

Tai pagerina Tobias Cohen funkciją, kuri puikiai veikia su daugialypėmis matricomis:

http://jsfiddle.net/BNnwF/2/

Tačiau tai nėra jQuery įskiepis, bet tai užtrunka tik kelias sekundes, jei norite jį naudoti, jei norite naudoti tokiu būdu: tiesiog pakeiskite funkcijų deklaracijos apvalkalą:

 function serializeFormObject(form) { ... } 

nuo:

 $.fn.serializeFormObject = function() { var form = this; ... }; 

Manau, kad tai panaši į makro sprendimą, kaip tai daroma, bet manau, kad tai šiek tiek švaresnis ir paprastesnis. Be to, į smuiką įtraukiau makekų testą ir pridėjau papildomų. Kol kas tai gerai veikia man.

 function serializeFormObject(form) { function trim(str) { return str.replace(/^\s+|\s+$/g,""); } var o = {}; var a = $(form).serializeArray(); $.each(a, function() { var nameParts = this.name.split('['); if (nameParts.length == 1) { // New value is not an array - so we simply add the new // value to the result object 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 || ''; } } else { // New value is an array - we need to merge it into the // existing result object $.each(nameParts, function (index) { nameParts[index] = this.replace(/\]$/, ''); }); // This $.each merges the new value in, part by part var arrItem = this; var temp = o; $.each(nameParts, function (index) { var next; var nextNamePart; if (index >= nameParts.length - 1) next = arrItem.value || ''; else { nextNamePart = nameParts[index + 1]; if (trim(this) != ''  temp[this] !== undefined) next = temp[this]; else { if (trim(nextNamePart) == '') next = []; else next = {}; } } if (trim(this) == '') { temp.push(next); } else temp[this] = next; temp = next; }); } }); return o; } 
0
18 сент. Atsakymą pateikė Kipras 18 rugsėjis 2012-09-18 18:26 '12 12:26 pm 2012-09-18 18:26

Mano kodo iš mano phery bibliotekos gavo serializavimo procedūrą, kuri gali apdoroti tikrai sudėtingas formas (pavyzdžiui, demo https://github.com/pocesar/phery/blob/master/demo.php#L1664 ) ir tai nėra vienkartinis. Iš tikrųjų jis tikrina, kokio tipo laukai yra. Pavyzdžiui, radijo kanalas neatitinka diapazono, jis nėra tas pats, kas keygen, tai nėra tas pats, kaip pasirinkti kelis. Mano funkcija yra visa tai, ir ją galite pamatyti adresu https://github.com/pocesar/phery/blob/master/phery.js#L1851 .

LINK 

0
10 янв. Atsakymą pateikė barbushin sausio 10 d 2012-01-10 20:41 '12 at 8:41 pm 2012-01-10 20:41

Tobiaso sprendimas yra teisingas, tačiau, kaip pažymėjo @macek komentatorius, jis neveikia foo [bar] įėjimų ir nutraukia juos į sub-objektus.

Ši funkcija taikoma tik PHP, tačiau man vis dar labai naudinga sukurti tą pačią struktūrą „JavaScript“.

Aš ką tik pakeitiau aukščiau pateiktą Tobias kodą, taigi visi jo kreditai. Tikriausiai tai galėtų būti daroma švaresne, bet aš tiesiog jį nugalėjau per penkias minutes ir maniau, kad tai gali būti naudinga.

Šiuo metu ji neapdoroja daugiamatės matricos ar skaitinės indeksuotos matricos. Tai reiškia, kad jis veiks tik su pavadinimais foo [bar], o ne su foo [].

 jQuery.fn.serializeObjectPHP = function() { var o = {}; var re = /^(.+)\[(.*)\]$/; var a = this.serializeArray(); var n; jQuery.each(a, function() { var name = this.name; if ((n = re.exec(this.name))  n[2]) { if (o[n[1]] === undefined) { o[n[1]] = {}; o[n[1]][n[2]] = this.value || ''; } else if (o[n[1]][n[2]] === undefined) { o[n[1]][n[2]] = this.value || ''; } else { if(!o[n[1]][n[2]].push) { o[n[1]][n[2]] = [ o[n[1]][n[2]] ]; } o[n[1]][n[2]].push(this.value || ''); } } else { if (n  !n[2]) { name = n[1]; } if (o[name] !== undefined) { if (!o[name].push) { o[name] = [o[name]]; } o[name].push(this.value || ''); } else { o[name] = this.value || ''; } } }); return o; }; 
0
19 мая '12 в 9:31 2012-05-19 09:31 Atsakymą pateikė Kevin Jhangiani gegužės 19, 12 d. 9:31 2012-05-19 09:31

Ar kas nors paminėjo nuorodą? gana kietas ir paprastas kaip $ („# myform“). formParams ();

-1
31 марта '12 в 9:04 2012-03-31 09:04 atsakymas pateikiamas diegohb kovo 31 d. 12 val. 9:04 2012-03-31 09:04

Ši funkcija grąžina visas reikšmes, konvertuotas į norimą tipą;

bool / string / (sveikasis skaičius / plūdės)

Norėdami tai padaryti, jums tai reikia, tačiau nuo serializeArray taip pat yra jQuery, todėl nesvarbu, ar tai yra imho.

  (function($) { "use strict"; $.fn.jsonSerialize = function() { var json = {}; var array = $(this).serializeArray(); $.each(array, function(key, obj) { var value = (obj.value == "") ? false : obj.value; if(value) { // check if we have a number var isNum = /^\d+$/.test(value); if(isNum) value = parseFloat(value); // check if we have a boolean var isBool = /^(false|true)+$/.test(value); if(isBool) value = (value!=="false"); } json[obj.name] = value; }); return json; } })(jQuery); 
-1
01 янв. atsakymas duodamas Ceed Jan 01 2016-01-01 21:43 '16 at 21:43 2016-01-01 21:43

Sukurkite žemėlapį ir užkarpykite visus laukus, išlaikydami jų vertes.

 var params = {}; $("#form").find("*[name]").each(function(){ params[this.getAttribute("name")] = this.value; }); 
-1
27 мая '16 в 13:31 2016-05-27 13:31 Justinas Levene atsakė gegužės 27 d. 16 val. 13:31 2016-05-27 13:31

Naudokite:

 var sf = $('#mainForm').serialize(); // URL encoded string sf = sf.replace(/"/g, '\"'); // Be sure all "s are escaped sf = '{"' + sf.replace(/ '","'); // Start "object", replace tupel delimiter  sf = sf.replace(/=/g, '":"') + '"}'; // Replace equal sign, add closing "object" // Test the "object" var formdata = eval("(" + sf + ")"); console.log(formdata); 

Jis veikia kaip žavesio, net ir labai sudėtingų formų.

-7
24 дек. atsakymas pateikiamas xlthor 24 dec. 2012-12-24 15:06 '12, 15:06, 2012-12-24 15:06
  • 1
  • 2

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