Javascript 向服务器提交有序列表

为了自学Javascript，我尝试制作一个网页，为用户提供一个项目列表（如食物），要求他们将这些食物从最喜欢的食物排序到最不喜欢的食物，并在完成后提交数据。使用jQuery排序表似乎是一种很好的方法。然而，我不确定数据提交应该如何进行

我是这么想的。这些食物中的每一种都会放在这样一个分区中：

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

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

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

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

披萨
寿司
墨西哥玉米薄饼卷

当用户单击“提交”按钮时，我希望确定这些项目的顺序，并将此顺序发送回服务器（顺便说一句，我在服务器端使用Django）。似乎我可以用这样的函数来确定项目的顺序：

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

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

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

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

函数getOrder（） { var食品=$（“.foods”）； var-id=[]；

---

对于（var x=0；x，一种语义上更相关的列表生成方法是使用实际的

元素

所以如果你有这样的东西：

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

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

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

<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文档，当您使用序列化可排序元素时，它要求它们的ID采用

setname\u number

格式。因此，通过将列表设置为

food\u 1

，

food\u 2

等，jQuery可以识别比萨饼的ID为1，其集合为food。

saveFoods

中的

数据

变量>然后将包含类似于

food[]=1&food[]=2&food[]=3的内容，您可以在Django应用程序中处理这些内容。
在项目列表中放置隐藏字段可能会更容易。提交表单时，相同的订单将在post或get中发送到服务器

例如：

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

是的，规范是某种形式的用户操作，因此单击按钮是一个不错的选择。您将编写一个例程来调用排序例程并将其发送到服务器

JSON是一个很好的选择，因为它是轻量级的。如果您想玩得更多，可以使用XML，但我认为除了学习之外，没有什么理由这样做，因为XML在这个例子中增加了不必要的权重。
提供了可排序列表，并提供了排序索引，您可以将其发布回服务器。
没有任何可序列化的内容他的可排序分区。哈？文档说它只适用于具有名称属性的表单元素。这不是相同的序列化。检查“可排序”链接my answer和Ctrl+f“serialize”-可排序包括序列化列表元素的序列化调用。使用
ol
（有序列表）而不是
ul
（无序列表）从语义上来说，这是一个很好的答案。投票人应该告诉我们为什么他们会投票，因为这看起来很干净（尽管我会将div改为ul/li）。