Question

我使用jquery sortable来排序图像网格。该脚本工作（我得到图像的网格，我可以对它进行排序（拖放），我的成功结果产生预期的数据数组（见下文）和firebug网络选项卡列出已发布的排序成功数据。我的问题是下班后搜索是为了找出为什么foreach循环不会回显成功结果的公布值。怀疑我在这里错过了明显的信息。任何帮助都会非常感激。

filename：draggable.php

                <!doctype html>
                <html lang="en">
                <head>
                  <meta charset="utf-8">
                  <meta name="viewport" content="width=device-width, initial-scale=1">
                  <title>jQuery UI Sortable - Display as grid</title>
                  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
                  <link rel="stylesheet" href="/resources/demos/style.css">
                  <style>
                  #sortable { list-style-type: none; margin: 0; padding: 0; width: 450px; }
                  #sortable li { margin: 3px 3px 3px 0; padding: 1px; float: left; width: 100px; height: 90px; font-size: 4em; text-align: center; }
                  </style>
                  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
                  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
                  <script>
                  $( function() {
                    $( "#sortable" ).sortable();
                    $( "#sortable" ).disableSelection();
                  } );
                  </script>
                </head>
                <body>

                <?php
                <!-----------get media_urls from database----------------->

                 <div id="element">
                <ul id="sortable">


                <li id="item-1" class="ui-state-default">     <img class="image" src="<?php echo $media_url1 ?>" width="100px" height="100px">       </li>
                <li id="item-2" class="ui-state-default">     <img class="image" src="<?php echo $media_url1 ?>" width="100px" height="100px">       </li>
                <li id="item-3" class="ui-state-default">     <img class="image" src="<?php echo $media_url2 ?>" width="100px" height="100px">       </li>
                <li id="item-4" class="ui-state-default">     <img class="image" src="<?php echo $media_url3 ?>" width="100px" height="100px">       </li>
                <li id="item-5" class="ui-state-default">     <img class="image" src="<?php echo $media_url4 ?>" width="100px" height="100px">       </li>
                <li id="item-6" class="ui-state-default">     <img class="image" src="<?php echo $media_url5 ?>" width="100px" height="100px">       </li>
                <li id="item-7" class="ui-state-default">     <img class="image" src="<?php echo $media_url6 ?>" width="100px" height="100px">       </li>
                <li id="item-8" class="ui-state-default">     <img class="image" src="<?php echo $media_url7 ?>" width="100px" height="100px">       </li>
                <li id="item-9" class="ui-state-default">     <img class="image" src="<?php echo $media_url8 ?>" width="100px" height="100px">       </li>
                <li id="item-10" class="ui-state-default">     <img class="image" src="<?php echo $media_url9 ?>" width="100px" height="100px">       </li>


                </ul>
                                    //test results-see two outputs below
                Query string: <span></span>
                <p class ="result"></p>

                </div>


                <script>

                $('ul').sortable({

                    update: function (event, ui) {
                        var data = $(this).sortable('serialize');

                         $('span').text(data);      

                        $.ajax({
                            data: data,
                            type: 'POST',
                            url: 'draggable.php',
                            success:function(result){
                            $(".result").html(data);}
                        });  

                    }
                });

                //$(window).resize(resize);

                </script>

                <?php
                $i = 0;

                foreach ($_POST['item'] as $value) {
                    echo "each".$value;
                    $i++;
                }
                ?>

                </body>
                </html>

这是两个成功的结果

            Query string: item[]=2&item[]=1&item[]=3&item[]=4&item[]=5&item[]=6&item[]=7&item[]=8&item[]=9&item[]=10

            item[]=2&item[]=1&item[]=3&item[]=4&item[]=5&item[]=6&item[]=7&item[]=8&item[]=9&item[]=10

Foreach循环不生成Ajax发布的数据

0 个答案: