将ajax发布的数据获取到php foreach循环中

Question

为了清楚起见，我正在更新这个问题。我正在使用可排序的 jquery 和 AJAX（参见下面的代码）来排序和保存图像网格。一切正常，我收到以下成功消息 - 在我的脚本和 firebug 网络控制台上。

            //firebug params and success message output
             item[]=2&item[]=1&item[]=3&item[]=4&item[]=5&item[]=6&item[]=7&item[]=8&item[]=9&item[]=10

            //request header
                Host: example.com
                User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64; rv:50.0) Gecko/20100101 Firefox/50.0
                Accept: */*
                Accept-Language: en-US,en;q=0.5
                Accept-Encoding: gzip, deflate
                Referer: http://example.com/PropertyIndex/property_gallery/draggable.php
                Content-Type: application/x-www-form-urlencoded; charset=UTF-8
                X-Requested-With: XMLHttpRequest
                Content-Length: 90
                Cookie: PHPSESSID=b1lr9he4l2hbcnlkcsebfq2134
                Connection: keep-alive
 //request body
 item[]=1&item[]=3&item[]=2&item[]=4&item[]=5&item[]=6&item[]=7&item[]=8&item[]=9&item[]=10

看来数据已成功发布。然而，经过数小时的搜索，我无法弄清楚如何将发布的数据——item[] 数组——返回给 PHP，以便它可以被 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
                Query string: <span></span>
                <p class ="result"></p>

                </div>

                //post the data using ahax
                <script>

                $('ul').sortable({

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

                         $('span').text(data);      //test success 2

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

                    }
                });

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

                </script>

                <?php

                print_r()//an empty array--but why?

                $i = 0;

                //this loop is failing to echo the success result ie item[]
                foreach ($_POST['item'] as $value) {
                    echo "each".$value;
                    $i++;
                }
                ?>

                </body>
                </html>

Answer 1

嗯.. 使用 $.post 可以正常工作。我还建议在另一个 php 文件中处理新序列的数据。

$.post("draggable-processing.php",{
   data:data
},
function(data){
   $(".result").html(data);
});

数据不是一个对象，而是一个字符串，你必须手动分解：

// file draggable-processing.php:
<? 
$aSequence = explode('&',$_POST['data']);
for($i = 0; $i<count($aSequence);$i++){
    preg_match('/=([a-z0-9]*)$/', $aSequence[$i], $treffer);
    echo($treffer[1]."\n");
}