Het indienen van een geordende lijst naar een server

Question

Het indienen van een geordende lijst naar een server

stemmen

35

Om mezelf te leren Javascript, probeer ik naar een webpagina die gebruikers een lijst met items (zoals voedsel) geeft, vraagt hen om deze voedingsmiddelen van favoriet om minst favoriete sorteren, en de gegevens in te dienen als ze klaar zijn. Met behulp van jQuery sortables lijkt een goede manier om dit te doen. Maar ik ben niet zeker hoe de indiening van gegevens moet gebeuren.

Hier is wat ik denk. Elk van deze voedingsmiddelen zou zijn in een div als volgt uit:

<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>

Wanneer de gebruiker een knop verzenden klikt, wil ik dat de volgorde van deze items te bepalen, en voor deze ordening terug (door de manier, ik ben met behulp van Django op de server) om te worden verzonden naar de server. Het lijkt erop dat ik kan de volgorde van de items met een functie als dit te bepalen:

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

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

Echter, ik zit vast op een paar dingen:

Waar in mijn code zou ik noem deze functie? Ik denk dat het zou een onclick actie als de gebruiker op de verzendknop drukt, maar ik ben niet zeker waar de gegevens van de functie terugkeert zou krijgen doorgegeven.
Welk formaat zou het meest geschikt voor het verzenden van deze ordening naar de server (bv JSON) zijn?

(Ik weet dat dit is echt een fundamentele vraag, maar ik heb nooit een webpagina met JavaScript vóór, dus dit gebied van de programmering is allemaal nieuw voor mij.)

javascript

De vraag is gesteld op 22/02/2009 om 19:41
user RexE

In andere talen...

4 antwoorden

stemmen

-1

Het zou waarschijnlijk gemakkelijker zijn om verborgen velden in de lijst met items te zetten. Wanneer het formulier wordt ingediend, zal dezelfde bestelling verzonden naar de server in de post of te krijgen.

Voorbeeld:

<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>

De post zal dan een array in het, zoals:

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

antwoordde op 22/02/2009 om 19:46
bron van user Darryl Hein

stemmen

0

Ja, de norm is een vorm van actie van de gebruiker, dus een druk op de knop is een goede keuze. U krijgt een routine die het bestelproces routine belt en stuurt deze naar de server te schrijven.

JSON is een goede optie, want het is licht van gewicht. Wilt u een beetje meer te spelen, kunt u naar XML, maar ik zie weinig reden om deze anders dan om te leren te doen, als XML voegt onnodig gewicht in dit geval.

antwoordde op 22/02/2009 om 19:49
bron van user Gregory A Beamer

stemmen

0

De Scriptaculous bibliotheek biedt sorteerbare lijsten en geeft de gesorteerde index die u terug naar de server kunt plaatsen.

antwoordde op 23/02/2009 om 20:33
bron van user Diodeus - James MacFarlane

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

Een meer semantisch relevante manier van doen van een lijst is met behulp van een echte <ul>element.

Dus als je had iets als dit:

<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>

De volgende jQuery code zou bestemde zijn:

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

Volgens de jQuery docs op sorteerbaar , wanneer u een serienummer van de elementen van een sorteerbaar het vereist hun ID om in een setname_numberformaat. Dus door het hebben van uw lijst als food_1, food_2enz jQuery erkent dat de ID van Pizza is 1 en de set is voedsel. De datavariabele in saveFoodswil iets dergelijks bevatten dan food[]=1&food[]=2&food[]=3die je kunt verwerken in uw Django app.