it-swarm.com.de

Verwenden Sie Jquery, um das Formular erneut mit JSON-Daten zu füllen

Ich habe ein HTML-Formular, das ich über Ajax in der Datenbank speichere. Um die Abfragezeichenfolge von Schlüssel/Wert-Paaren zu erhalten, habe ich die sehr bequeme serialize-Funktion wie folgt verwendet:

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

Jetzt möchte ich ein leeres Formular laden und es erneut mit den Daten aus der Datenbank füllen, die von einem Ajax-Aufruf als JSON-String geliefert werden. Ich konnte ein Javascript-Objekt mit den richtigen Schlüssel/Wert-Paaren wie folgt erhalten:

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

Was ist der einfachste und eleganteste Weg, um das Formular wieder aufzufüllen? 

beachten Sie, dass die Eingabeelemente des Formulars Text, Auswahl, Ankreuzfeld und Radio sind. Die Namen der Eingabeelemente entsprechen den Namen der Datenbankspalten und sind die Schlüssel der Schlüssel/Wert-Paare im obigen data-Objekt. Deshalb funktioniert die Funktion serialize so gut für mich

21

Ich würde sagen, der einfachste Weg wäre etwas in dieser Richtung:

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

Im Grunde sind die einzigen, die ungerade sind, die Ankreuzfelder und Funkgeräte, da sie ihre geprüfte Eigenschaft haben müssen, und zwar geprüft. Die Funkgeräte sind etwas komplexer als die Kontrollkästchen, da wir sie nicht nur überprüfen müssen, sondern auch den richtigen ONE (anhand des Wertes) suchen müssen. Für alles andere (Eingaben, Textbereiche, Auswahlfelder usw.) sollte der Wert auf den im JSON-Objekt zurückgegebenen Wert gesetzt werden.

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

52
Bryan B.

Wenn data [0] den Namen des Feldes und data [1] den Wert enthält, können Sie Folgendes tun:

Sie können so etwas für Textfelder tun:

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

Dann so etwas für Selects:

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

Bitte beachten Sie, dass Kontrollkästchen und Optionsfelder nur dann serialisiert werden, wenn sie markiert sind. 

So etwas für Kontrollkästchen (vor jQuery 1.6+):

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

Das Optionsfeld erfordert möglicherweise zusätzliche Arbeit, je nachdem, wie Sie die verschiedenen unterscheiden. (ID, Wert usw.)

0
evasilchenko