jQuery sérialiser HTML5 attributs de données

Ne pouvais pas trouver n'importe où, peut-être quelqu'un sait ou peut faire une suggestion.

J'avais un formulaire avec beaucoup de <inputs>, je voulais envoyer ce formulaire avec jQuery $.ajax fonctionnalité, donc je n'ai $('#myform').serialize() et d'envoyer ce que json.

Maintenant, ma forme est plus avancé et a HTML5 data- attributs, que je veux envoyer trop, mais .serialize() ne les voit pas.

J'ai essayé de les mettre dans <form> tag, <input> balises rien ne fonctionne.

Quelle est la meilleure pratique pour saisir et envoyer toutes les données du formulaire? Je sais que sur .serializeArray(), mais comment puis-je obtenir tous les data- attributs que mon <form> tag a attaché sérialisé?

Vous devez définir la façon dont vous vous attendez de ces attributs pour obtenir sérialisés. Voulez-vous simplement data-foo="bar" pour obtenir mappé à foo=bar ? Aussi, est-il une raison qu'ils ne peuvent pas aller dans hidden les balises input?
Puisque les attributs data - peut être appelé n'importe quoi, vous aurez également besoin de préciser lesquels vous souhaitez sérialiser.
Techniquement oui, je veux penser à un moyen facile de le faire, de sorte que je pouvais faire $('#myform').serialize() et la chaîne aurait valeurs d'entrée et de data- valeurs d'attribut sérialisé et s'est échappé. Il pourrait être une fonction personnalisée.
idée d'utiliser caché entrées semble être la bonne approche pour moi.
double possible de: stackoverflow.com/questions/5560293/...

OriginalL'auteur Sergey Telshevsky | 2012-08-23

8

Voici comment cela peut être fait. Il pourrait ne pas être le meilleur moyen, mais il fonctionne de la façon dont il devrait fonctionner.

http://jsfiddle.net/Bvzqe/12/

HTML:
```
<form id="frm" data-id="123" data-list[one]="first" data-list[two]="second">
```
La sérialisation:
```
    var form = $('#frm');
    var dataarr = new Array();
    for(var i in form.data()) {
        var subarr = new Array();
        subarr['name'] = i;
        subarr['value'] = form.data()[i];
        dataarr.push(subarr);
    }
    var serialized = $.param(form.serializeArray().concat(dataarr));
```
Il vous permet même d'avoir des tableaux de data- des attributs tels que
```
data-list[one]="first" data-list[two]="second"
```
URL encodée il peut sembler mauvais, comme il échappe à crochets, mais j'ai testé cela sur le côté serveur - il analyse tout exactement comme il le devrait.

Ce n'est que pour ceux qui ne veulent pas utiliser <input type="hidden">

Ce est la bonne façon de faire. J'ai utilisé ce genre de code dans un couple de méthodes d'assistance. Un nouveau "serializeDataArray()" extension jQuery AJAX et un message de retour de la méthode qui comprend trois parties... la forme originale sérialiser matrice de sérialiser les données des attributs de forme et de source/post reprendre le contrôle. Pas sûr de ce que le HTML 5 règles sont sur ce sujet, mais je pense que les attributs de données provenant à la fois (plus globale) et (contextuelle) de l'élément source sont nécessaires dans la plupart des cas.

OriginalL'auteur Sergey Telshevsky
6

Si possible, vous devez stocker vos valeurs supplémentaires comme hidden champs de saisie (un par valeur) plutôt que comme des méta-données sur d'autres champs de saisie. Ils vont ensuite être sérialisé automatiquement dans le formulaire.

Je ne vais pas écrire un sérialiseur pour vous, je pense que c'est une mauvaise idée. Si vous insister sur l'envoi des valeurs pour le navigateur comme data- champs que vous pourriez faire, même si, à convertir ces data- des champs en hidden entrées.
```
$('#myform:input').each(function() {
    var input = this;
    $.each($(input).data(), function(key, value) {
        $('<input>', {type: hidden, name: key, value: value}).insertAfter(input);
    });
});
```
Hop, caché champs de saisie qui sera automatiquement sérialisé!

Être conscient que jQuery utilise également .data() pour stocker des choses comme des événements. Pour éviter une itération sur les objets que vous auriez à utiliser le natif DOM fonctions pour récupérer les data- attributs, et non pas toutes les données liées à la propriétés qui ont été stockées sur les éléments.

Désolé, que tout ne sera pas le faire. Ce n'est pas la réponse à ma question, qui est une solution de contournement.
ouais, c'est ce que j'appelle un travail autour de. Vous avez inventé un système permettant de stocker des informations dans le formulaire (en raison de préoccupations mineures sur les temps de chargement des pages) qui est pas prise en charge par le W3C <form> balises et ensuite se plaindre lorsque les moyens de serialise que les données n'existe pas?! Les champs cachés n'ont pas été inventés ", car il n'y a pas d'AJAX", ont été inventé en raison de c'est la façon dont vous fournissez des informations supplémentaires dans un formulaire!
Gotta côté avec @Alnitak sur ce, la bande passante introduites par des entrées supplémentaires est incroyablement banal. Caché entrées à également un travail, indépendamment de si javascript est activé (ou cassé).
vous devriez noter que je ne suis pas tout rep - je déjà atteint la limite quotidienne. Je suis en train de mettre autant d'efforts parce que je crois profondément que votre application est incorrecte.
J'ai à côté de l'Sergey ici. Je suis en cours d'exécution contre le même défi. Même si l'utilisation caché des éléments d'entrée est considéré comme la norme de facto moyen de virer de bord sur d'autres données à un formulaire, le gros problème inhérent à cette méthode est que l'on ne peut plus associer des données* les valeurs d'une forme particulière de l'élément. C'est-à-dire, une fois activé, vous vous retrouvez avec un plat à la carte dont la structure ne permet pas de représenter les associations. Ce que je vais probablement faire est d'écrire mon propre sérialiseur qui crée un JSON arbre de la forme.

OriginalL'auteur Alnitak

voici mon func, obtenir toutes les données-* de l'élément de support + ignorer tableau

Data2Params: function (el, ignoredAtt) {
    ignoredAtt = typeof ignoredAtt !== 'undefined' ? ignoredAtt : [];

    var data = {};
    for (var key in el.data()) {
        if (ignoredAtt.indexOf(key) === -1)
            data[key] = el.data(key);
    }
    return data;
}

OriginalL'auteur dobs

Vous devez vous connecter pour publier un commentaire.