向服務器提交一個有序列表

自學Javascript Javascript，我試圖做一個網頁，給用戶一個項目列表（例如食物），要求他們從喜好到最不喜歡的東西排序這些食物，並提交數據完成後。使用jQuery排序似乎是一個很好的方法來做到這一點。但是，我不確定應該如何提交數據。向服務器提交一個有序列表

這是我在想什麼。這些食品將是在這樣一個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之前做了一個網頁，所以編程的這個區域是所有新的給我。）

來源

2009-02-22 RexE

更語義相關的方式做一個清單是通過使用一個實際的<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代碼是appropiate：

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的文檔上sortable，當你使用序列化的元素可排序它需要他們的ID爲setname_number格式。因此，通過將您的列表作爲food_1,food_2等。jQuery認識到比薩的ID是1，它的集合是食物。然後，saveFoods中的data變量將包含您可以在您的Django應用程序中處理的內容，如food[]=1&food[]=2&food[]=3。

來源

2009-02-22 20:44:52

在他的可排序div中沒有任何可序列化的內容。 – 2009-02-22 20:46:51

閱讀文檔。 :) – 2009-02-22 20:51:14

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

來源

2009-02-22 20:46:14

是的，範數是某種形式的用戶動作，所以按鈕點擊是一個很好的選擇。您將編寫一個調用排序例程並將其發送到服務器的例程。

JSON是一個很好的選擇，因爲它是輕量級的。如果你想玩更多的東西，你可以轉向XML，但是除了學習外，我沒有理由這麼做，因爲XML在這種情況下增加了不必要的重量。

來源

2009-02-22 20:49:10

Scriptaculous library提供了可排序的列表，並提供了可以回發到服務器的排序索引。

來源

2009-02-23 21:33:05

向服務器提交一個有序列表

回答

相關問題