Das Einreichen einer geordneten Liste an einen Server

Question

Das Einreichen einer geordneten Liste an einen Server

stimmen

35

Zu lehren mich Javascript, ich versuche, eine Web-Seite zu machen, die den Benutzern eine Liste von Elementen (zB Lebensmittel) gibt, bittet sie, diese Lebensmittel zu sortieren von Favorit wenigsten, und senden die Daten, wenn sie fertig sind. jQuery sortables Mit scheint wie ein guter Weg, dies zu tun. Allerdings bin ich mir nicht sicher, wie die Datenübermittlung passieren sollte.

Hier ist, was ich denke. Jede dieser Lebensmittel würden in einem div wie folgt aus:

<div id=sortable>
    <div id=1 class=foods>Pizza</div>
    <div id=2 class=foods>Sushi</div>
    <div id=3 class=foods>Taco</div>
</div>

Wenn der Benutzer eine Schaltfläche „Senden“ klickt, mag ich die Reihenfolge dieser Elemente bestimmt werden, und für diese Bestellung an den Server gesendet werden sollte zurück (übrigens, ich bin mit Django auf der Server-Seite). Es scheint, dass ich die Reihenfolge der Elemente mit einer Funktion wie diese bestimmen kann:

function getOrder()
{
    var foods = $(.foods);
    var ids = [];

    for(var x=0; x<foods.length; x++)
    {
        ids.push(foods[x].id);
    }
    return ids;
}

Allerdings bin ich auf ein paar Dinge fest:

Wo in meinem Code würde ich nenne diese Funktion? Ich denke, es wäre eine Onclick Aktion sein, wenn der Benutzer die Submit-Button drückt, aber ich bin mir nicht sicher, wo die Daten der Funktion zurückzuübergeben bekommen würde.
Welches Format wäre die am besten geeignet für diese Bestellung an den Server gesendet (zB JSON)?

(Ich weiß, dass dies eine wirklich grundlegende Frage ist, aber ich habe noch nie eine Webseite mit JavaScript gemacht, so dass dieser Bereich der Programmierung ist alles neu für mich.)

javascript

Veröffentlicht am 22/02/2009 um 19:41
vom benutzer RexE

In anderen Sprachen...

4 antworten

stimmen

-1

Es wäre wahrscheinlich einfacher sein, versteckte Felder der Elemente in der Liste zu setzen. Wenn das Formular abgeschickt wird, wird die Reihenfolge, in der Post an den Server senden oder erhalten.

Beispiel:

<div id="sortable">
    <div id="1" class="foods"><input type="hidden" name="sortable[]" value="1" />Pizza</div>
    <div id="2" class="foods"><input type="hidden" name="sortable[]" value="2" />Sushi</div>
    <div id="3" class="foods"><input type="hidden" name="sortable[]" value="3" />Taco</div>
</div>

Die Post wird dann einen Array darin, wie:

array(
    0 => 1,
    1 => 3,
    2 => 2
)

Beantwortet am 22/02/2009 um 19:46
quelle vom benutzer Darryl Hein

stimmen

0

Ja, das ist die Norm eine gewisse Form der Benutzeraktion, so dass eine Schaltfläche klicken ist eine gute Wahl. Sie erhalten eine Routine schreiben, die die Ordnungs Routine aufruft und sendet sie an den Server.

JSON ist eine gute Wahl, da es leicht ist. Wenn Sie ein bisschen mehr spielen wollen, können Sie auf XML-Kopf, aber ich sehe sehr wenig Grund, diese anderen zu tun, als zu lernen, wie XML in diesem Fall unnötig Gewicht hinzufügt.

Beantwortet am 22/02/2009 um 19:49
quelle vom benutzer Gregory A Beamer

stimmen

0

Die Scriptaculous Bibliothek bietet sortierbare Listen und stellt den sortierten Index, den Sie zurück an den Server veröffentlichen können.

Beantwortet am 23/02/2009 um 20:33
quelle vom benutzer Diodeus - James MacFarlane

Paolo Bergantino · Accepted Answer · 2009-02-22 19:44

Eine semantisch relevante Möglichkeit , eine Liste zu tun , ist durch eine tatsächliche Verwendung <ul>Element.

Also, wenn Sie so etwas wie dies haben:

<ul id='foods'>
<li id='food_1'>Pizza</li>
<li id='food_2'>Sushi</li>
<li id='food_3'>Taco</li>
</ul>
<a href="javascript:saveFoods();">Save Order</a>

Der folgende jQuery-Code wäre sachgemäßer:

function saveFoods(id) {
    var data = $("#foods").sortable('serialize');
    var action = "/django/view/";
    $.post(action, data, function(json, status) {
        if(status == 'success' && json.status == 'success') {
            alert('Saved order of the foods!');
        } else {
            alert('Unable to complete the request.');
        }
    }, "json");
}

Nach dem jQuery docs auf sortierbar , wenn Sie die Elemente einer sortierbar verwenden Serialisierung erfordert es ihre IDs in einem sein setname_numberFormat. Also , indem Sie Ihre Liste, wie sie food_1, food_2etc. erkennt jQuery , dass die ID von Pizza 1 ist und seine Menge ist Essen. Die dataVariable saveFoodsdann so etwas wie enthalten , food[]=1&food[]=2&food[]=3dass Sie in Ihrem Django App bearbeiten können.