Υποβολή ταξινομημένη λίστα σε ένα διακομιστή

Question

Υποβολή ταξινομημένη λίστα σε ένα διακομιστή

ψήφοι

35

Για να διδάξει τον εαυτό μου Javascript, Προσπαθώ να κάνω μια ιστοσελίδα που δίνει στους χρήστες μια λίστα των αντικειμένων (π.χ. τρόφιμα), τους ζητά να ταξινομήσετε αυτά τα τρόφιμα από τα αγαπημένα σε λιγότερο αγαπημένο, και να υποβάλουν τα δεδομένα όταν τελειώσετε. Χρησιμοποιώντας jQuery sortables φαίνεται σαν ένας καλός τρόπος για να γίνει αυτό. Ωστόσο, δεν είμαι σίγουρος πόσο η υποβολή στοιχείων πρέπει να συμβεί.

Εδώ είναι αυτό που σκέφτομαι. Κάθε ένα από αυτά τα είδη διατροφής θα είναι σε div κάπως έτσι:

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

Όταν ο χρήστης κάνει κλικ σε ένα κουμπί «Αποστολή», θέλω η σειρά αυτών των αντικειμένων που θα καθοριστεί, και γι 'αυτό παραγγελία να σταλεί πίσω στο διακομιστή (από τον τρόπο, είμαι με τη χρήση Django στην πλευρά του server). Φαίνεται ότι μπορεί να καθορίσει τη σειρά των στοιχείων με μια λειτουργία όπως αυτό:

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

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

Ωστόσο, είμαι κολλημένος σε ένα-δυο πράγματα:

Σε περίπτωση που στον κώδικα μου θα ζητώ αυτή η λειτουργία; Σκέφτομαι ότι θα ήταν μια ενέργεια onclick όταν ο χρήστης πατήσει το κουμπί υποβολής, αλλά δεν είμαι σίγουρος πού θα πάρει περάσει τα δεδομένα η συνάρτηση επιστρέφει.
Ποια μορφή θα ήταν η πλέον κατάλληλη για την αποστολή αυτής της παραγγελίας στο διακομιστή (π.χ. JSON);

(Ξέρω ότι αυτό είναι ένα πολύ βασικό ερώτημα, αλλά εγώ ποτέ δεν έχουν κάνει μια ιστοσελίδα με την Javascript πριν, έτσι ώστε αυτή η περιοχή του προγραμματισμού είναι όλα τα νέα για μένα.)

javascript

Δημοσιεύθηκε 22/02/2009 στις 19:41
χρήστη RexE

Σε άλλες γλώσσες...

4 απαντήσεις

ψήφοι

-1

Θα ήθελα ίσως να είναι πιο εύκολο να βάλει κρυφά πεδία μέσα στην λίστα των στοιχείων. Κατά την υποβολή της φόρμας, η ίδια σειρά θα στείλει στο διακομιστή στο ταχυδρομείο ή να πάρετε.

Παράδειγμα:

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

Η θέση θα έχει στη συνέχεια μια σειρά σε αυτό, όπως:

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

Απαντήθηκε 22/02/2009 στις 19:46
πηγή χρήστη Darryl Hein

ψήφοι

0

Ναι, ο κανόνας είναι κάποια μορφή δράσης των χρηστών, έτσι, ένα κουμπί κλικ είναι μια καλή επιλογή. Θα γράψετε μια ρουτίνα που καλεί τη ρουτίνα παραγγελίας και το στέλνει στον διακομιστή.

JSON είναι μια καλή επιλογή, καθώς είναι ελαφρύ. Αν θέλετε να παίξετε λίγο περισσότερο, μπορείτε να κατευθυνθείτε προς XML, αλλά βλέπω πολύ λίγο λόγο να το κάνετε αυτό εκτός από το να μάθουν, όπως XML προσθέτει περιττό βάρος σε αυτή την περίπτωση.

Απαντήθηκε 22/02/2009 στις 19:49
πηγή χρήστη Gregory A Beamer

ψήφοι

0

Η βιβλιοθήκη Scriptaculous παρέχει δυνατότητα ταξινόμησης λίστες και να παρέχει την ταξινομημένη δείκτη που μπορείτε να τοποθετήσετε στο διακομιστή.

Απαντήθηκε 23/02/2009 στις 20:33
πηγή χρήστη Diodeus - James MacFarlane

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

Μια πιο σημασιολογικά σχετικές τρόπος για να γίνει μια λίστα είναι με τη χρήση ενός πραγματικού <ul>στοιχείου.

Έτσι, αν είχε κάτι σαν αυτό:

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

Ο κώδικας που ακολουθεί jQuery θα ήταν πρόσφορη:

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

Σύμφωνα με τα έγγραφα jQuery για δυνατότητα ταξινόμησης , όταν χρησιμοποιείτε serialize τα στοιχεία μιας δυνατότητα ταξινόμησης απαιτεί αναγνωριστικά τους να είναι σε setname_numberμορφή. Έτσι, έχοντας τη λίστα σας, όπως food_1, food_2κλπ jQuery αναγνωρίζει ότι η ταυτότητα της Pizza είναι 1 και το σύνολο της είναι τα τρόφιμα. Η dataμεταβλητή στη saveFoodsβούληση να περιέχει κάτι σαν food[]=1&food[]=2&food[]=3αυτό που μπορεί να επεξεργαστεί το Django εφαρμογή σας.