web-dev-qa-db-fra.com

Formulaire de désérialisation jQuery

J'utilise jQuery Serialize pour sérialiser mes éléments de formulaire et je voudrais les désérialiser. Malheureusement, vous ne trouvez aucun désérialiseur jQuery fonctionnel, des suggestions?

javascriptjquerydeserialization
38
Tomas

La moitié de jQuery Serialize est param () , donc la moitié de quelque chose qui désérialise une chaîne de requête va être un deparam. Malheureusement, je n'ai pas pu trouver un bon deparam autonome. Pour l'instant, je recommande d'obtenir la bibliothèque jQuery BBQ et de l'utiliser. Si vous n'avez pas besoin des autres éléments, vous pouvez les supprimer. J'ai lu quelque part que Ben Alman (cowboy) avait prévu d'extraire le deparam dans son propre module.

Pour le reste de la désérialisation, vous aurez juste besoin de parcourir l'objet renvoyé par deparam et pour chaque paire de clés et de valeurs de l'objet, sélectionnez l'élément de formulaire en fonction de la clé et définissez la valeur des éléments de formulaire sur la valeur.

9
Benjamin Atkin

J'ai écrit une version de jQuery.deserialize qui prend en charge les données sérialisées générées à partir des fonctions serialize, serializeArray et serializeObject. Il prend également en charge tous les types d'éléments de formulaire, y compris les cases à cocher et les boutons radio.

59
kflorence

Essaye ça:

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;
}
24
Jack Allan

J'étais très intéressé à essayer JQuery.deserialize, mais il ne semblait pas du tout gérer les cases à cocher, donc cela ne répondait pas à mes besoins. J'ai donc écrit le mien. Cela s'est avéré plus facile que je ne le pensais, car la fonction jQuery val () fait la plupart du travail:

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

Vous devriez pouvoir utiliser ceci comme ceci:

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

Où data est une liste de paramètres telle que ce que $ ("# myform"). Serialize () produirait.

Il affecte tous les champs du formulaire et effacera les valeurs des champs qui ne sont pas contenus dans les données. Mais vous pouvez également passer n'importe quel sélecteur pour affecter uniquement des champs spécifiques, comme vous pouvez le faire avec la fonction de sérialisation. Par exemple.:

$("select").deserialize(data);
19
David Hammond

Un peu en retard sur celui-ci, mais quelqu'un pourrait trouver cela utile.

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;
}
5
user3204597

Je ne réponds pas maintenant à votre réponse, mais je suppose que vous voulez le sérialiser et le renvoyer au serveur, puis utiliser les données sérialisées, c'est pourquoi vous devez le désérialiser?

Si tel est le cas, vous devriez envisager d'utiliser .serializeArray (). Vous pouvez l'envoyer en tant que données POST en ajax, puis y accéder ultérieurement car vous aurez un objet.

2
Pehmolelu

Nécessaire tout dans une seule chaîne, qui peut être stockée dans peut-être COOKIE, et plus tard lire et remplir le même formulaire avec des valeurs d'entrée.

Séparateur des éléments d'entrée: ~(utilisez n'importe quel séparateur)

Séparateur des attributs d'entrée: |(utilisez n'importe quel séparateur)

type d'entrée | nom d'entrée | valeur d'entrée ~ type input2 | nom input2 | valeur input2

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

Exemple:

hidden|vote_id|10~radio|option_id|~radio|option_id|427~radio|option_id|428~
0
Atul Yadav

Si ce que vous voulez est de supprimer la notation encodée par URL standard, vous pouvez utiliser decodeURIComponent () de JavaScript, qui vous donnera une chaîne régulière, comme ceci:

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

Dans ce cas, decodedString ressemblera à Http://Hello:World, voici un violon de travail .

Vous avez tout cela à la recherche de ce même problème et j'ai trouvé la réponse ici: Comment puis-je décoder une URL avec jQuery?

Je sais que c'est une vieille question, mais faire quelques recherches pour jQuery désérialiser m'a amené ici, donc je pourrais aussi bien essayer de donner une approche différente sur la question pour les personnes ayant le même problème.

0
LasagnaAndroid

En utilisant la fonction deparam de Jack Allan avec jQuery, vous pouvez changer cette ligne:

map[key] = value;

à

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

Ce qui chargera les données dans vos champs de formulaire.

0
Phil LaNasa

ce code renvoie un tableau lorsque la même clé est repérée plusieurs fois dans la chaîne sérialisée


    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;
    }
0
Spacefrog

Peut-être un peu tard, mais vous cherchez peut-être quelque chose comme JQuery.deserialize . Problèmes: pas de prise en charge des cases à cocher ou des boutons radio.

0
Ivan