2016-12-05 128 views
0

为了清楚起见,我正在更新这个问题。我正在使用jQuery排序和AJAX(见下面的代码)来排序和保存图像网格。所有工作正常,我得到以下成功消息 - 无论是在我的脚本和萤火虫网络控制台。将数据发布到php foreach循环

  //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 [] array ---返回给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> 
+0

PHP和JavaScript不直接连接。你不能使用javascript来修改php,因为在你选择运行时javascript的用户输入之前,php已经执行很久了。你的ajax调用将不得不用新的值将结果写回到div(希望是有道理的,我认为你需要你的失败的代码片段在你的draggable.php文件中 – happymacarts

+0

你的发布结果保存在哪里?数据库,会话,文件? – jeff

+0

感谢高兴。请帮助我多一点,你会吗?我不知道我应该做什么来实现你的解决方案。我已经添加了一些关于请求头数据在我的问题。我怀疑我错过了这里显然 – WChris

回答

0

嗯..用$ .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"); 
}