2016-12-05 129 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"); 
}