Utilisez jquery pour relayer le formulaire avec les données JSON

J'ai un formulaire HTML, que je sauvegarde dans la base de données via ajax. Pour obtenir la chaîne de requête des paires de clés / valeurs, j'ai utilisé la fonction de serialize très pratique, comme ceci:

 var myData = $("form#form_id").serialize(); $.ajax({ url: "my_save_script.php", type: "post", data: myData, success: function(msg){ alert(msg); } });

Maintenant, je souhaite charger un formulaire vierge, et le remplacer à nouveau avec les données de la base de données, qui sont envoyées à partir d'un appel ajax en tant que chaîne JSON. J'ai pu obtenir un objet Javascript avec les paires de clés / valeurs correctes comme ceci:

 data = $.parseJSON(data); data = data[0];

Quelle est la manière la plus simple et la plus élégante de relacher le formulaire?

Gardez à l'esprit que les éléments d'entrée du formulaire sont le texte, la case à cocher, la case à cocher et la radio. Les noms des éléments d'entrée sont identiques aux noms des colonnes de la base de données et sont les clés des paires de clés / valeurs dans l'objet de data ci-dessus. C'est pourquoi la fonction de serialize fonctionne si bien pour moi

Je dirais que la façon la plus simple serait quelque chose dans ce sens:

 // reset form values from json object $.each(data, function(name, val){ var $el = $('[name="'+name+'"]'), type = $el.attr('type'); switch(type){ case 'checkbox': $el.attr('checked', 'checked'); break; case 'radio': $el.filter('[value="'+val+'"]').attr('checked', 'checked'); break; default: $el.val(val); } });

Fondamentalement, les seuls qui sont étranges sont les cases à cocher et les radios parce qu'ils doivent avoir leur propriété contrôlée, bien, vérifiée . Les radios sont un peu plus complexes que les cases à cocher parce que non seulement nous devons les vérifier, mais nous devons trouver la bonne à vérifier (en utilisant la valeur). Tout le reste (entrées, zones de texte, cases de sélection, etc.) devrait simplement avoir sa valeur définie à celle qui est retournée dans l'objet JSON.

Jsfiddle: http://jsfiddle.net/2xdkt/

Si les données [0] contiennent le nom du champ et les données [1] contiennent la valeur, vous pouvez effectuer les opérations suivantes:

Vous pouvez faire quelque chose comme ça pour les zones de texte:

 $("[name="+data[0]+"]").val(data[1]);

Ensuite, quelque chose comme ça pour sélectionner:

 $("[name="+data[0]+"]").val(data[1]);

Veuillez noter que les cases à cocher et les boutons radio sont uniquement sérialisés s'ils sont vérifiés.

Donc, quelque chose comme ça pour les cases à cocher (avant jQuery 1.6+):

 $("[name="+data[0]+"]").attr('checked','checked');

Le bouton radio peut nécessiter un travail supplémentaire en fonction de la différence entre les différents. (IE Id, valeur, etc.)

Je vous suggère de changer la façon dont vous faites une requête ajax. Utilisez .post ()

 $.post("my_save_script.php", { data: myData, }, function(data) { $.each(data, function(i, item){ $("#"+item.field).val(item.value); }); }, "json");