0
わかりやすくするためにこの質問を更新しています。私は画像のグリッドをソートして保存するために、AJAX（下のコードを参照）と一緒にjquery sortableを使用しています。すべて正常に動作し、スクリプトと火かき棒ネットワークコンソールの両方で次の成功メッセージが表示されます。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 []配列をPHPに返す方法を考えることができませんので、FOREACH Loopで処理できるようになります。
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