10
votes

JQuery Serialize Attributs de données HTML5

ne pouvait pas trouver ceci nulle part, peut-être que quelqu'un sait ou peut faire une suggestion.

J'ai eu un formulaire avec beaucoup de , je voulais envoyer ce formulaire avec jQuery $. Ajax fonctionnalité, donc j'ai fait $ (' #myform '). Serialize () et envoyez ceci comme JSON.

Maintenant, mon formulaire est plus avancé et contient des attributs HTML5 - , que je souhaite envoyer aussi, mais . Sérialiser () ne les voit pas.

J'ai essayé de les mettre dans tag, tags - rien ne fonctionne.

Quelle est la meilleure pratique pour les saisir et envoyer avec toutes les données de formulaire? Je sais sur .Serializearray () , mais comment puis-je obtenir toutes les attributes data - mon étiquette a été attaquée?


11 commentaires

Vous devez définir comment vous vous attendez à ce que ces attributs soient sérialisés. Voulez-vous juste data-foo = "bar" pour être mappé sur foo = bar ? En outre, y a-t-il une raison pour laquelle ils ne peuvent pas entrer dans les balises d'entrée cachées masques?


Étant donné que les attributs de données peuvent être appelés tout, vous devrez également spécifier lesquels vous souhaitez sérialiser.


Techniquement - oui, je veux penser à un moyen facile de le faire, de sorte que je puisse faire $ ('# myform'). Serialize () et la chaîne aurait des valeurs d'entrée et Données - Valeurs d'attribut Serialized et échappé. Cela pourrait être une fonction personnalisée.


@MikerObinson Tous les attributs de données , si je voudrais prendre seulement quelques-uns, je le ferais par le codage dur


C'est certainement faisable, mais il y a beaucoup de questions encore. Comment gérerez-vous des attributs de données en double (E.G. Data-ID = 1, Data-ID = 2) sur différents éléments. Devraient-ils être envoyés sous forme de tableau ou associé au nom de l'élément d'entrée qu'ils étaient sur?


@MikerObinson n'a jamais entendu dire qu'il est valable de le faire, mais dans tous les cas, faites simplement la dernière écrase les autres. (comme une option la plus simple)


@ L'idée d'Alnitak d'utiliser des intrants cachés semble être la bonne approche pour moi.


@sissonb C'est une solution vraiment courante utilisée depuis des années et ce n'est pas ce que le point de la question est.


Dupliqué possible de: Stackoverflow.com/questions/ 5560293 / ...


@ Françoiswahl Pourriez-vous s'il vous plaît dites-moi, où voyez-vous le mot Serialize dans la rubrique que vous avez liée?


@Vlakarados: Autant que je puisse vous dire, essayez de poster des données situées dans des attributs de données. Vous voulez les sérialiser automatiquement, ce qui aussi loin que possible n'est pas automatiquement automatiquement automatiquement. La question que j'ai liée traite des problèmes d'affichage des données d'attribut de données et indique que les champs cachés étant dans ce cas la meilleure solution (pas de travail). Si vous n'aimez pas que vous n'aimez pas les champs cachés, vous pouvez appliquer une œuvre en écrivant votre propre fonction pour lire chaque attribut de données dans une propriété d'objet, puis sérialisez cet objet et publiez-le avec vos données de formulaire.


3 Réponses :


6
votes

Si possible, vous devez stocker vos valeurs supplémentaires sous forme de champs de saisie masqué (une seule par valeur) plutôt que comme méta-données sur d'autres champs de saisie. Ils seront ensuite sérialisés automatiquement dans le cadre du formulaire.

Je n'écrirai pas de sérialisateur pour vous, car je pense que c'est une mauvaise idée. Si vous insisistez sur l'envoi des valeurs au navigateur sous forme de champs - les champs que vous pouvez faire cela, cependant, pour convertir ces données - dans sur < code> masqué entrées. xxx

hey presto, des champs d'entrée cachés qui seront automatiquement sérialisés!

Sachez que jQuery utilise également .Data () Pour stocker des événements comme des événements. Pour éviter d'itération de ces objets, vous devez utiliser les fonctions DOM autochtones pour récupérer les attributes et non des propriétés lié ​​aux données qui ont été stockés sur les éléments.


15 commentaires

Désolé, cela ne va pas faire. Ce n'est pas la réponse à ma question, c'est une solution de contournement.


@Vlakarados Non, mettez vos données dans Data - Les champs sont la solution de contournement. L'utilisation des champs masqué est la standard moyen d'inclure des données supplémentaires (non visibles) dans une soumission de formulaire.


C'est une solution de contournement pour ma question plutôt que de solution. Je sais que c'est la solution standard, mais j'ai demandé comment sérialiser Data - attributs non "Comment masquer les données d'affichage à l'écran". Les intrants cachés n'ont été inventés que parce qu'il n'y avait pas de JS à l'époque, pas d'ajax. Pour une écriture de projet à haute charge au lieu de `key-clé =" valeur "` utilise plus de bande passante, une plus grande charge fois. Et je ne dis même pas sur la facilité de manipulation de ces données dans JS.


@Vlakarados Yup, c'est ce que j'appelle un travail autour. Vous avez inventé un système de stockage d'informations supplémentaires sous la forme (en raison de préoccupations mineures concernant les temps de chargement de la page) pas pris en charge par W3C étiquettes, puis se plaindre ensuite lorsque les moyens de sérialiser que les données n'existent pas ?! Les champs cachés n'étaient pas inventés "car il n'y avait pas de ajax", ils ont été inventés parce que C'est ainsi que vous fournissez des informations supplémentaires sous une forme!


@Vlakarados et Fwiw, je pourrais trivialement écrire ce dont vous avez besoin - ce serait une douzaine de lignes de code. Mais je ne serais pas utile de le faire. Vous fabriquez un problème de votre propre prise pour aucune bonne raison.


Gotta Côté avec @alnitak à ce sujet, la bande passante introduite par des intrants supplémentaires est incroyablement triviale. Les entrées cachées fonctionneront également, que JavaScript soit activé (ou cassé).


Ok, les gars, j'ai demandé une question normale - "Comment puis-je Seriealize attributs de données". Comment pensez-vous, sont des intrants cachés la réponse à cette question? J'ai également mentionné que j'ai fait une recherche sur ce sujet et que cela n'est pas couvert nulle part.


@Vlakarados Ne vous rendez-vous pas compte que la raison pour laquelle il n'est pas couvert nulle part est parce que ce n'est pas une bonne idée!


@Alnitak, je suis sûr que vous avez entendu parler d'autres cadres tels que knockout.js, qui utilisent principalement des attributs de données pour des choses même de base. Et si dans mon projet actuel, tous les systèmes de frontage sont basés sur ces attributs, devrions-je tout réécrire et utiliser les intrants? Je vois ton point, je le fais vraiment, mais je n'ai pas demandé si c'était une bonne idée ou non, je n'ai pas demandé quelles autres possibilités existent.


@Vlakarados: Votre question était Quelle est la meilleure pratique pour les saisir et envoyer avec toutes les données de formulaire? . La réponse est des champs cachés. Mais vous pouvez appliquer une œuvre de travail et itérer Throguh tous les attributs de données et créer un objet à envoyer avec votre message de formulaire. Ou utilisez un cadre si cela existe qui le fait pour vous. Si vous en trouvez un, veuillez le poster comme une réponse car elle aidera les autres à l'avenir.


@Vlakarados sûr, il y a beaucoup d'utilisations pour données - attributs et propriétés. Knockout.js les utilise, JQuery les utilise. Les utiliser pour stocker les données de formulaire n'est pas un cas d'utilisation valide pour eux! Le fait même que ces cadres font les utilisent est encore plus une raison pour vous de ne pas!


Merci pour un édition, ce n'est pas ce que je voulais voir, mais ce est une réponse à ma question, merci ainsi de remercier et de faire évoluer bien sûr.


@Vlakarados Vous devriez noter que je ne reçois aucun représentant pour cela - j'ai déjà atteint la limite quotidienne. Je pense que je pense sérieusement que votre mise en œuvre actuelle est incorrecte.


C'est pourquoi je discute aussi, j'espère que vous ne prenez aucune offense


Je dois dire la Sergey ici. Je suis en train de courir contre le même défi en ce moment. Même si l'utilisation d'éléments d'entrée cachés est considérée comme la méthode standard, de facto de clouer sur des données supplémentaires à une forme, le gros problème inhérent à cette méthode est que l'on ne peut plus associer des valeurs de données-* avec un élément de formulaire particulier. C'est-à-dire une fois sérialisé, vous vous retrouvez avec une carte plane dont la structure ne représente pas d'associations. Ce que je vais probablement finir par faire est d'écrire mon propre sérieliseur qui crée un arbre JSON de la forme.



9
votes

Voici comment cela peut être fait. Ce n'est peut-être pas le meilleur moyen, mais cela fonctionne comme ça devrait fonctionner.

http: // jsfiddle. NET / BVZQE / 12 / P>

HTML: P>

data-list[one]="first" data-list[two]="second"


2 commentaires

Cela fonctionne et est la bonne façon d'aller. J'ai utilisé ce type de code dans quelques méthodes d'assistance. Une nouvelle extension JQuery "SerializedAnaAtarray ()" et une méthode Ajax Post Back, qui comprend trois parties ... La matrice de formulaire originale Serialize Serialize Attributs de données pour le contrôle de la forme et de la source / post-arrière. Je ne sais pas quelles sont les règles HTML 5, mais je pense que les attributs de données de la forme (plus globale) et de l'élément source (contextuel) sont nécessaires sont la plupart des cas.


Merci de me rappeler que vous pouvez simplement utiliser une entrée cachée lol



0
votes

Voici mon FUNC, obtenez toutes les données- * of Element + Support Ignorer Array XXX


0 commentaires