0
PHPでテキストファイルから収集した値（ファイル名）に画像を変更しようとしています。これはファイルを配列（data）として収集し、カウンター（counter）の助けを借りて配列の正しい項目をエコーすることによって行われます。このカウンタは、JavaScriptのクリックごとに増分されますが、イメージを変更できるように、この増分された変数をPHPに返す必要があります。これを行う方法はありますか？これは、（さらに下の完全なコードを参照してください）変数を投稿で私の手をしようと、これまでの私の試みです：JavascriptからPHPに変数を送信していて、動作しません。
<script>
var variableToSend = JSON.parse(localStorage.getItem('counter'));
$.post('lan7_old.php', {variable: variableToSend});
</script>
<?php $counter = $_POST['variable'];
echo $counter; ?
私はそれがページが画像クリックでリフレッシュされるように投稿する働くべきだと思ったが、多分私ここで間違っています。それとも、私のコードに何か間違っていますか？表示される画像はまだテキストファイルの最初の画像ですが、これはcounterのPHP echoに整数を追加したためです。値はPHP counterに設定されていません。
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" href="styles.css">
<script src="jquery-3.1.1.min.js"></script>
</head>
<body>
<script>
// Saves counter variable although the page is refreshed
$(document).ready(function(){
if (localStorage.getItem('counter') === null) {
localStorage.setItem('counter', JSON.stringify(0));
}
// Incrementing counter until next page is needed
$("img").click(function(){
var counter = JSON.parse(localStorage.getItem('counter'));
if(counter < 60) {
counter += 4;
localStorage.setItem('counter', JSON.stringify(counter));
}
else {
localStorage.setItem('counter', JSON.stringify(0));
window.location.href = '8.php';
return false;
}
$("#test").text(localStorage.getItem('counter')); //for testing
// sending js variable to be obtained by PHP
var variableToSend = JSON.parse(localStorage.getItem('counter'));
$.post('lan7_old.php', {variable: variableToSend});
});
$("#test").text(localStorage.getItem('counter'));
});
</script>
<div class="main">
<h1>Heading</h1>
<p>Heading 2</p>
<div id="test">hello</div>
<?php $data = getData($subtest_nr);
// retrieving counter variable
$counter = $_POST['variable'];
echo $counter; //for testing ?>
<form id="myform" method="post">
<div class="four_images">
<div class="flex-item">
<input type="radio" name="image" value="7.11" id="alt1" class="hidden">
<label for="alt1"><img src="images/<?php echo $data[$counter+0]; ?>"></label>
</div>
<div class="flex-item">
<input type="radio" name="image" value="7.12" id="alt2" class="hidden">
<label for="alt2"><img src="images/<?php echo $data[$counter + 1]; ?>"></label>
</div>
<div class="flex-item">
<input type="radio" name="image" value="7.13" id="alt3" class="hidden">
<label for="alt3"><img src="images/<?php echo $data[$counter+2]; ?>"></label>
</div>
<div class="flex-item">
<input type="radio" name="image" value="7.14" id="alt4" class="hidden">
<label for="alt4"><img src="images/<?php echo $data[$counter+3]; ?>"></label>
</div>
<div>
<input type="submit" name="save" value="Save Image Selection">
</div>
</div>
</form>
</div>
</body>
</html>
サーバークライアントアーキテクチャの仕組みを完全に理解しているとは思いません。 PHPがサーバー上で実行されます。つまり、ブラウザからリクエストを受け取った場合、応答は1つの大きな文字列です。 PHPがこれを行う方法は、コードを '<？php'と'？> 'の間で実行し、それらのタグの外にあるすべてをコピーして貼り付けることです。 PHPが膨大な文字列をまとめると、それをあなたのブラウザに送り返します。あなたのブラウザは解析して表示し、もしあればJavaScriptを実行します。重要なことは、PHPとJavaScriptが同時に実行されないことです。 PHPは、JSが順調に進んでいるときに、長い間行われます。 – Siguza
これを念頭に置いて、 '$。post 'はAJAXリクエストを送信するので、ここでは間違ったアプローチです（つまり、バックグラウンドでページを開いて内容を取得する - コールバック関数を指定しなかったので、結果を見てください）、変数はPHPスクリプトの_different_インスタンスにポストされて、_same_で利用できるようにします。それを可能にするには、すべてのユーザーインタラクションでページをリロードする必要があります。もう一つの可能性はJavaScriptを使って画像を変更することですが、これはリロードなしで機能します。 – Siguza
ありがとう、ありがとう！私はそれがこの種の解決策ではうまくいかないと思う。それが最善の方法ではないかもしれないと思ったが、とにかく試してみたかった...代わりにJavascriptで画像を変更しようとするだろう。 – Ingrid