Отправка упорядоченный список на сервере

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 на стороне сервера). Кажется, я могу определить порядок элементов с функцией, как это:

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 на сортировке , при использовании сериализации элементов сортировки требует их идентификаторов , чтобы быть в setname_numberформе. Таким образом, имея свой список , как food_1, food_2и т.д. JQuery признает , что ID пиццы 1 и его набор продуктов питания. dataПеременная saveFoodsбудет содержать что - то подобное , food[]=1&food[]=2&food[]=3что вы можете обрабатывать в вашем приложении Django.