通过JavaScript读取拖放有序列表

我有一个应用程序（使用JqueryUI.GridSort拖放），允许用户上传照片，然后使用拖放按他们希望的顺序对照片进行排序

页面加载时，系统会提示用户上载照片，并将其发布到下一页。当他们到达下一页时，我的php脚本为他们上载的每个文件创建一个

，其中包含

。对于他们上传到站点的每一张图片，都会创建一个新的

。在这个

里面是一个

'；

编辑

主页：
$（'my#u form'）。在（'submit'，function（）上{
var有序_列表=[]；
$（“#可排序li img”）。每个（函数（）{
有序的列表.push（$（this.attr（'id'））；
});
$（“#有序列表_数据”）.val（JSON.stringify（有序列表））；
});
更新_data.php：

如果您使用的是

，则可以执行类似操作（假设使用jQuery）：

本质上，您所做的是在

上循环，获取每个

并将ID（按外观顺序）附加到数组中。数组保留JavaScript和JSON中的顺序，因此可以使用

JSON.stringify

函数将其转换为JSON字符串，将其设置为

字段的值，然后提交表单

如果您想使用AJAX，其功能非常类似。但是，您不需要使用

onsubmit

（或

onclick

）而是使用

让我们使用

选项，因为它更简单。总之，您将拥有类似于上述JS和HTML的内容，如下所示：

$('#my_form').on('submit', function() {
    var ordered_list = [];
    $("#sortable li img").each(function() {
        ordered_list.push($(this).attr('id'));
    });
    $("#ordered_list_data").val(JSON.stringify(ordered_list));
});

我建立了一个网站，做的基本上和David发布的一样

我添加了一个片段，将结果写到页面上的一个div中，这样您就可以看到发生了什么：

<?php
    // process other fields as normal
    if(isset($_POST['ordered_list_data'])) {
        $img_ordering = json_decode($_POST['ordered_list_data']);
    } else {
        // handle case where there is no data
    }
    // do things with the data
?>

---

这看起来很好，并且正是我想要的，JS小提琴+1。第二个问题。一旦我有了订单，我就可以按照自己的意愿处理数据。但由于这不是PHP，我不确定如何将其转换为XML。有没有办法将CSV或保存的订单发布到PHP，以便我可以使用简单的XML？或者它会留在Jquery中吗？是的，Javascript块末尾的注释掉的行实际上会将CSV发布到您的服务器（无论表单上的操作是什么-在我的示例script.php中）。然后在php端，您从$\u post['list']获取值并将其保存到数据库中。非常好。它似乎工作得很好。是否可以同时获取图像src或ID的内容？您可以在“每个“循环。使用jQuery可以为您提供很多选择。很好的回答，我该如何将命令传递给PHP，以便将其输入到SimpleXML中？除了UI之外，我对Jquery不是很熟悉。我仍然在学习过程中，你可能会有一天。这样的事件会在用户点击

submit

按钮时发生。在这种情况下，它将在PHP中显示为

$\u POST['ordered\u list\u data']

和

$\u REQUEST['ordered\u list\u data']

。从那里，您可以使用

json_解码（$_POST['ordered_list_data']）从中获取PHP数组。非常好，我将尝试一下。非常感谢。我似乎有点问题。您是否可以编辑您的答案，并说明您认为该帖子/请求的工作方式？很抱歉我做了额外的工作，呵呵。@RobertDickey我错过了一件非常重要的事情（实际上有两件事）。我已经用他们更新了我的帖子。首先，我忘记了
method=“post”
。其次，我忘记了表单是以
name=“where”
作为键提交的！尝试将
name=“ordered\u list\u data”
添加到隐藏字段中，看看是否可以修复它。
$('#my_form').on('submit', function() {
    var ordered_list = [];
    $("#sortable li img").each(function() {
        ordered_list.push($(this).attr('id'));
    });
    $("#ordered_list_data").val(JSON.stringify(ordered_list));
});

<form id="my_form" method="post" action="./update_data.php">
    <!-- other fields -->
    <input type="hidden" name="ordered_list_data" id="ordered_list_data"></input>
    <input type="submit" value="Submit"></input>
</form>

<?php
    // process other fields as normal
    if(isset($_POST['ordered_list_data'])) {
        $img_ordering = json_decode($_POST['ordered_list_data']);
    } else {
        // handle case where there is no data
    }
    // do things with the data
?>

<input type="button" id="savebutton" value="save"/>
<div id="output"></div>
<form id="listsaveform" method="POST" action="script.php">
    <input type="hidden" name="list" id="hiddenListInput" />
</form>

$(function() {
$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();
$( "#savebutton" ).click(function() { LISTOBJ.saveList(); });
});

var LISTOBJ = {
    saveList: function() {
        var listCSV = "";
        $( "#sortable li" ).each(function() {
            if (listCSV === "") {
                listCSV = $(this).text();
            } else {
                listCSV += "," + $(this).text();
            }
        });
        $("#output").text(listCSV);
        $("#hiddenListInput").val(listCSV);
        //$("#listsaveform").submit();
    }
}