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>
PHP和JavaScript不直接連接。你不能使用javascript來修改php,因爲在你選擇運行時javascript的用戶輸入之前,php已經執行很久了。你的ajax調用將不得不用新的值將結果寫回到div(希望是有道理的,我認爲你需要你的失敗的代碼片段在你的draggable.php文件中 – happymacarts
你的發佈結果保存在哪裏?數據庫,會話,文件? – jeff
感謝高興。請幫助我多一點,你會嗎?我不知道我應該做什麼來實現你的解決方案。我已經添加了一些關於請求頭數據在我的問題。我懷疑我錯過了這裏顯然 – WChris