我有一个应用程序(使用JqueryUI.GridSort拖放),该应用程序允许用户上传照片,然后按照他们希望使用拖放的顺序对照片进行排序。
在页面加载时,系统会提示用户上传已发布到下一页的照片。当他们的下一个页面上到达我的PHP脚本创建一个<ul id="sortable">包含<li>每个他们上载的文件。对于他们上传到站点的每张图片,都会<li>创建一个新图片。其内部<li>是一个<img>用于为其<li>上载图像的图片。
<ul id="sortable">
<li>
<img>
我的目标是在将图片排列在拖放界面后,能够“保存”图片的顺序。例如,一旦他们按照想要的顺序完成了对图片的排列和排序后,我希望能够向他们发送另一个创建xml文件的页面(我不需要XML的帮助,只保存了订单),并使用他们以正确顺序创建的列表。
经过数小时的PHP修改后,我意识到由于PHP是一种服务器端语言,因此它看不到渲染后的排序。所以我的问题是,有没有办法让JavaScript或Ajax读取列表的当前顺序,并将其发布到下一页?如果您知道如何做,请提供一个示例,其中一个页面的POST,另一个页面的接收?我对Ajax不太熟悉。
非常感谢您提供的任何帮助。
示例代码(foreach语句的内容,该语句为上载的每个文件创建一个LI)
$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 ?>
我建立了一个JSFiddle,基本上执行了David发布的相同操作。
我添加了一块代码,将结果写到页面上的div上,因此您可以看到发生了什么:
<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(); }); } }