2

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

在页面加载时，提示用户上传发布到下一页的照片。当他们到达下一页时，我的 php 脚本会为他们上传的每个文件创建一个<ul id="sortable">包含<li>。对于他们上传到网站的每张图片，都会<li>创建一张新图片。里面<li>是一个用他们上传的图像<img>设置图片的。<li>

我的目标是在拖放界面中排列图片后能够“保存”图片的顺序。例如，一旦他们按照他们想要的顺序排列和排序图片，我希望能够向他们发送另一个创建 xml 文件的页面（我不需要 XML 的帮助，只保存order) 使用他们以正确顺序创建的列表。

经过数小时的 PHP 修补后，我开始意识到，因为 PHP 是一种服务器端语言，它无法看到渲染后排序的内容。所以我的问题是，有没有办法让 JavaScript 或 Ajax 读取列表的当前顺序，并将其发布到下一页？如果您知道如何，请您提供一个页面上的 POST 和另一页上的帖子接收的示例？我对 Ajax 不是很熟悉。

非常感谢您提供的任何帮助。

示例代码（为每个上传的文件创建一个 LI 的 foreach 语句的内容）

 $imgID++;


echo '<li class="ui-state-default"><img id="'.$imgID.'"'.' src="user_files/'.$file_name.'" draggable="true" height="90" width="95"></li>';

编辑

main page :


<script>
$('#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));
});
</script>
<div id="tesT">
<form id="my_form" action="update_data.php">
    <!-- other fields -->
    <input type="hidden" id="ordered_list_data"></input>
    <input type="submit" value="Proceed to Step 2"></input>
</form>
</div>


update_data.php:

<?php
    // process other fields as normal
    if(isset($_POST['ordered_list_data'])) {
        $img_ordering = json_decode($_POST['ordered_list_data']);
echo "1";
    } else {
       echo "nodata";
    }
    // do things with the data

?>
4

2 回答 2

5

I built a JSFiddle doing basically the same thing that David posted.

I added a piece to write out the result to a div on the page, so you can see what's going on:

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

Javascript:

$(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();
    }
}
于 2013-07-18T20:08:35.610 回答
3

如果您使用的是 a <form>，则可以执行以下操作（假设正在使用 jQuery）：

$('#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));
});

本质上，您所做的是循环遍历<ul>，获取每个<img>并将 ids （按出现顺序）附加到数组中。数组在 JavaScript 和 JSON 中保留顺序，因此可以使用该JSON.stringify函数将其转换为 JSON 字符串，将其设置为<input type="hidden">字段的值，然后提交表单。

如果你想使用 AJAX，功能非常相似。但是，onsubmit您onclick将使用$.post.

让我们选择这个<form>选项，因为它更简单。总而言之，您将拥有类似于上述 JS 的内容以及如下 HTML：

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

然后，在update_data.php（或任何你的脚本命名）：

<?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
?>
于 2013-07-18T20:00:51.620 回答