jQuery deserializați formularul (Programare, Javascript, Jquery, Deserializare)

Tomas a intrebat.

Eu folosesc jQuery Serialize pentru a serializa elementele formularului meu și aș dori să le deserializez înapoi. Din păcate, nu pot găsi nici un deserializator jQuery de lucru, vreo sugestie?

Comentarii

  • Trebuie să furnizați mai multe informații. Doriți să le deserializați pe server? În care, caz, ar fi util dacă ne-ai spune ce folosești? Rails, PHP, ASP.net, Java? –  > Por Jaryl.
  • Scuze, am uitat să adaug că vreau să deserializez datele pe partea clientului folosind JS. –  > Por Tomas.
11 răspunsuri
Benjamin Atkin

Jumătate din jQuery Serialize este param(), , astfel încât jumătate din ceva care deserializează un șir de interogare va fi un deparametru. Din păcate, nu am reușit să găsesc un bun deparam de sine stătător. Deocamdată vă recomand să obțineți jQuery BBQ library și să o folosiți. Dacă nu aveți nevoie de celelalte chestii, le puteți elimina. Am citit undeva că Ben Alman (cowboy) a plănuit să extragă deparam în propriul său modul.

Pentru restul deserializării, va trebui doar să parcurgeți în buclă obiectul pe care deparam îl returnează și, pentru fiecare pereche de cheie și valoare din obiect, să selectați elementul de formular pe baza cheii și să setați valoarea elementelor de formular la valoarea respectivă.

kflorence

Am scris o versiune de jQuery.deserialize care acceptă datele serializate generate de funcțiile serialize, serializeArray și serializeObject. De asemenea, acceptă toate tipurile de elemente de formular, inclusiv casetele de selectare și butoanele radio.

Comentarii

  • Este un plugin grozav acolo! Vă mulțumim că ați venit cu unul. –  > Por adarshr.
  • Plugin este minunat ! Mulțumesc. –  > Por Jaymin Gajjar.
  • Hei, omule. Minunat plugin Am vrut doar să știu că plugin-ul dvs. oferă o modalitate prin care aș putea deserializa o matrice serializată și să o stochez într-o variabilă –  > Por Gardezi.
Jack Allan

Încearcă asta:

function deparam(query) {
    var pairs, i, keyValuePair, key, value, map = {};
    // remove leading question mark if its there
    if (query.slice(0, 1) === '?') {
        query = query.slice(1);
    }
    if (query !== '') {
        pairs = query.split('&');
        for (i = 0; i < pairs.length; i += 1) {
            keyValuePair = pairs[i].split('=');
            key = decodeURIComponent(keyValuePair[0]);
            value = (keyValuePair.length > 1) ? decodeURIComponent(keyValuePair[1]) : undefined;
            map[key] = value;
        }
    }
    return map;
}

Comentarii

  • Mulțumesc, este util pentru mine –  > Por Srihari Goud.
  • Simplu și util. +1 –  > Por Andrew Ribeiro.
  • Minunat! Mulțumesc! –  > Por kstratis.
David Hammond

Am fost foarte interesat să încerc JQuery.deserialize, dar nu părea să se ocupe deloc de căsuțele de bifat, așa că nu a servit scopurilor mele. Așa că mi-am scris propriul meu. S-a dovedit a fi mai ușor decât am crezut, deoarece funcția jQuery val() face cea mai mare parte a muncii:

jQuery.fn.deserialize = function (data) {
    var f = this,
        map = {},
        find = function (selector) { return f.is("form") ? f.find(selector) : f.filter(selector); };
    //Get map of values
    jQuery.each(data.split("&"), function () {
        var nv = this.split("="),
            n = decodeURIComponent(nv[0]),
            v = nv.length > 1 ? decodeURIComponent(nv[1]) : null;
        if (!(n in map)) {
            map[n] = [];
        }
        map[n].push(v);
    })
    //Set values for all form elements in the data
    jQuery.each(map, function (n, v) {
        find("[name='" + n + "']").val(v);
    })
    //Clear all form elements not in form data
    find("input:text,select,textarea").each(function () {
        if (!(jQuery(this).attr("name") in map)) {
            jQuery(this).val("");
        }
    })
    find("input:checkbox:checked,input:radio:checked").each(function () {
        if (!(jQuery(this).attr("name") in map)) {
            this.checked = false;
        }
    })
    return this;
};

Ar trebui să o puteți folosi astfel:

$("#myform").deserialize(data);

În cazul în care datele sunt o listă de parametri, cum ar fi ceea ce ar produce $(„#myform”).serialize().

Aceasta afectează toate câmpurile din formular și va șterge valorile câmpurilor care nu sunt conținute în date. Dar puteți, de asemenea, să treceți orice selector pentru a afecta doar anumite câmpuri, așa cum puteți face cu funcția serialize. De exemplu:

$("select").deserialize(data);

Comentarii

  • function decodeURIComponent() nu reușește cumva să traducă + (plus) în ` ` (spațiu). A trebuit să adaug o expresie regulată pentru a gestiona corect plus/spațiu. –  > Por David162795.
  • @David162795, este adevărat. Am rezolvat eu însumi acest lucru când am folosit această funcție făcând acest lucru: params.replace(/+/g, "%20") Nu am adăugat niciodată acest lucru la funcție, deoarece nu eram 100% sigur că funcționează în toate situațiile (deși nu m-am gândit niciodată la o situație în care ar fi o problemă). Este aceeași expresie regulată pe care ați folosit-o? –  > Por David Hammond.
  • Această funcție deserializează în toate elementele din document, resetând toate casetele de selectare și câmpurile cu nume corespunzătoare. Iar dacă deserializați șirul gol, ar reseta și valorile tuturor intrărilor din pagină cu nume gol. –  > Por TiGR.
  • @TiGR, intenția este de a face funcția opusă funcției serialize. Dacă faci $(„#myform”).deserialize(data), aceasta afectează toate câmpurile din formular (nu toate câmpurile din document, așa cum spui tu). Dar puteți, de asemenea, să treceți orice selector pentru a afecta doar anumite câmpuri. Tocmai am actualizat răspunsul pentru a clarifica un pic mai bine acest lucru. –  > Por David Hammond.
user3204597

Un pic cam târziu pentru asta, dar cineva ar putea găsi asta util.

function fetchInput(identifier) {
    var form_data = identifier.serialize().split('&');
    var input     = {};

    $.each(form_data, function(key, value) {
        var data = value.split('=');
        input[data[0]] = decodeURIComponent(data[1]);
    });

    return input;
}

Comentarii

  • Acest lucru funcționează destul de bine pentru array-uri unidimensionale; aș schimba input[decodeURIComponent(data[0])] = ... astfel încât numele de chei precum users[] și address[billing] să fie decodate corespunzător. –  > Por Jared Farrish.
  • Deși abia acum am observat că nu funcționează bine cu câmpuri dinamice precum customers[] în cazul în care este posibil să aveți mai multe câmpuri care generează o matrice atunci când sunt consumate de server. –  > Por Jared Farrish.
Pehmolelu

Nu vă răspund acum la întrebare, dar presupun că doriți să serializați și să trimiteți înapoi la server și apoi să utilizați datele serializate, motiv pentru care trebuie să le deserializați?

Dacă acesta este cazul, ar trebui să luați în considerare utilizarea .serializeArray(). Îl puteți trimite ca date POST în ajax, iar apoi îl puteți accesa mai târziu, deoarece veți avea un obiect.

Ivan

Poate că este puțin cam târziu, dar poate că sunteți în căutarea a ceva de genul JQuery.deserialize. Probleme: nu are suport pentru checkbox-uri sau butoane radio.

Phil LaNasa

Folosind Jack Allan’s deparam cu jQuery, puteți schimba această linie:

map[key] = value;

în

$('input[name=' + key + ']').val(value);

Care va încărca datele înapoi în câmpurile formularului.

Spacefrog

acest cod returnează o matrice atunci când aceeași cheie este reperată de mai multe ori în șirul serializat


    chaine="single=Single1&multiple=Multiple&multiple=Multiple1&multiple=Multiple2&multiple=Multiple3&check=check2&radio=radio1"
    function deserialize(txt){
    myjson={}
    tabparams=chaine.split('&')
    var i=-1;
    while (tabparams[++i]){
    tabitems=tabparams[i].split('=')
    if( myjson[decodeURIComponent(tabitems[0])] !== undefined ){
        if( myjson[decodeURIComponent(tabitems[0])] instanceof Array ){
            myjson[decodeURIComponent(tabitems[0])].push(decodeURIComponent(tabitems[1]))
        }
    else{
       myjson[decodeURIComponent(tabitems[0])]= [myjson[decodeURIComponent(tabitems[0])],decodeURIComponent(tabitems[1])]
            }
        }
    else{
         myjson[decodeURIComponent(tabitems[0])]=decodeURIComponent(tabitems[1]);
        }
    }
    return myjson;
    }

Atul Yadav

Necesare toate într-un singur șir de caractere, care poate fi stocat în poate COOKIE, iar mai târziu citit și completat același formular cu valori de intrare.

Separator de elemente de intrare: ~ (se poate folosi orice separator)

Atribute de intrare seperator: | (se utilizează orice separator)

tip de intrare | nume intrare | valoarea intrării ~ input2 tip | nume intrare2 | valoarea input2

var formData = '';
$('#form_id').find('input, textarea, select').each(function(i, field) {
    formData += field.type+'|'+field.name+'|'+field.value+'~';
});

Exemplu:

hidden|vote_id|10~radio|option_id|~radio|option_id|427~radio|option_id|428~

LasagnaAndroid

Dacă doriți să eliminați notația standard de codificare URL, puteți utiliza JavaScript’s decodeURIComponent(), , care vă va oferi un șir de caractere obișnuit, exact ca acesta:

var decodedString = decodeURIComponent("Http%3A%2F%2FHello%3AWorld");
alert(decodedString);

În acest caz, decodedString va arăta astfel Http://Hello:World, , aici este un o soluție de lucru.

Am obținut toate acestea căutând aceeași problemă și am găsit răspunsul aici: Cum pot decoda un URL cu jQuery?

Știu că aceasta este o întrebare veche, dar făcând câteva căutări pentru jQuery deserialize m-a adus aici, așa că aș putea la fel de bine să încerc să dau o abordare diferită asupra problemei pentru persoanele cu aceeași problemă.