Jquery ajax füllen dropdown mit json-response-Daten

Ich weiß, es gibt durchaus ein paar Fragen, die schwimmenden auf, aber ich bin noch nicht sicher, was zu tun ist.

Ich habe ein HTML-Formular namens "CuisineForm", nachdem der Benutzer wählt die Art der Küche, die AJAX sendet das Formular an den server. Der AJAX-Aufruf funktioniert, und der server antwortet mit JSON responsewhich enthält alle dienenden Zeiten dieser besonderen Küche. Diese portion mal sind unterteilt in Frühstück, Mittag-und Abendessen.

Diesen Zeiten müssen aufgefüllt werden, der in 3 separate dropdowns in der gleichen form. aber ich weiß wirklich nicht, wie die Verarbeitung der JSON-Ergebnisse zum Auffüllen der 3 dropdowns im Formular.

Hier ist die JSON-Antwort vom PHP-server-Seite Skript.
Beachten Sie, dass dieser generiert wurde, in das PHP-Skript mit "echo-Funktionen json_encode()".

{"breakfast":[{"09:00:00":"9:00 am"},{"09:30:00":"9:30 am"}],"lunch":[{"12:00:00":"12:00 pm"},{"12:30:00":"12:30 pm"}],"dinner":[{"19:00:00":"7:00 pm"},{"19:30:00":"7:30 pm"}]}

Hier ist mein $.post code.

$.post( "gettimeslots", $( "#CuisineForm" ).serialize(), function() {
          alert( "success" );
        })
          .done(function(data) {
            //Not sure what code to write here to populate dropdown

          })
          .fail(function() {
            alert( "There was a problem getting the dropdown values!" );
          })
          .always(function() {
            alert( "always" );
        });

Hier ist mein dropdown-Liste, die ich Auffüllen möchten

<select name="breakfasttimes" id="breakfasttimes"></select>
<select name="lunchtimes" id="lunchtimes"></select>
<select name="dinnertimes" id="dinnertimes"></select>

Meisten Implementierungen verwenden neigen $.getJSON. Aber, wie oben gezeigt, ich bin mit $.post statt. Bitte sagen Sie mir, wenn ich verwenden soll $.getJSON statt.

Kann jemand bieten einige Hinweise oder code-Tipps?

Dank
Kevin

InformationsquelleAutor aDvo | 2014-04-07

  1. 2

    Heres ein Turnschuh, enthält die vollständige Antwort

    HTML:

    <select name="breakfast" id="breakfast"></select>
<select name="lunch" id="lunch"></select>
<select name="dinner" id="dinner"></select>

    JS: 

    var data = {"breakfast":[{"09:00:00":"9:00 am"},{"09:30:00":"9:30 am"}],"lunch":        [{"12:00:00":"12:00 pm"},{"12:30:00":"12:30 pm"}],"dinner":[{"19:00:00":"7:00 pm"},{"19:30:00":"7:30 pm"}]};

//Put this code inside of the "done callback"
var $elements = $('#breakfast, #lunch, #dinner');
$.each(data, function (dataKey, dataVal) {
    $elements.each(function(domElKey, domElVal){
        if (dataKey === domElVal.id) {
            $.each(dataVal, function(timeKey,timeVal){
                $.each(timeVal,function(timePropKey, timePropVal){
                $(domElVal).append("<option>"+timePropVal+"</option>");
                });
            })
       }
    });
});

    Ein Turnschuh, der enthält die Antwort

    Hi. Dies hat mich auf die richtige Spur. Allerdings musste ich laufen ein parseddata = JSON.parse(data); vor die Schleife durch. Wenn nicht, würde ich Fehler auf einigen javascript-Fehler auf der ersten iteration der Hauptschleife. Ich Frage mich, warum dein Beispiel nicht haben, um die JSON verwenden.parse?
    Das hängt von der Antwort, die Sie bekommen, wieder aus dem server, kann auf die Rückgabe als json oder eines stringified json muss dann analysiert werden, im nicht sicher, was passiert, um die Antwort nach dem festlegen des Datentyps .

    InformationsquelleAutor Ofer Haber

  2. 0

    Könnten Sie die $.each() - Funktion um eine Schleife durch die Daten: 

    .done(function(data) {
$.each(data, function(index, element) {
            $('body').append($('<div>', {
                text: element.name
            }));
        });

})

    Vorausgesetzt, Ihre server-side-Skript nicht die richtige Content-Type: application/json response-header müssen Sie angeben, auf jQuery, das ist JSON mithilfe der dataType: 'json' parameter.

    Refrence

    InformationsquelleAutor Manwal

Schreibe einen Kommentar