ajaxでphpに値を渡したい

Question

プログラム初心者です。
PHPで処理を書いていて困っています。教えてください。

現在行おうとしていることはHTMLで記述している<div id="c1" class="movecloud" onclick="clickc(this.id);">をクリックした時、idの値"c1"をjavascriptで取得し変数に格納。その格納した変数をPHPの変数に代入なりして扱おうとしています。これら一連の処理は全て同じPHPファイルで実行したいのです。
いろいろ調べてみて、javascriptから値を渡すことができない、という意見が多く、その代わりajaxならできるとのことだったので現在ajaxで行おうとしています。

ただ私はプログラムの知識が乏しいため、書いているコードがあっているかわかりません。そこで質問なのですが、ajaxの書き方はこれであっているでしょうか？また、普通は別のajaxのかいてあるファイルとPHPファイルを別にして処理を行うと思うのですが、今回のように全てを同じPHPファイルで行うことは可能ですか？

知識不足により至らぬ点はたくさんあると思いますが、どうかご教授お願いします。

画像をクリックした際に実行されるscript
innerHTMLでidの値の取得できているかは確認済み

<script>
        function clickc(id){
            test.innerHTML=id;
            var id=id;
     
            $.ajax({
                type: 'post',
                url: './main.php',
                data: {cloudId: id},
            });
            
            $('html,body').animate({scrollTop:1360},600,'swing');
        }
</script>

<?php
        $cloudId = $_POST['cloudId'];
        echo $cloudId;
?>

echoでc1が表示されればいい

実行環境はxamppのlocal環境でで、ブラウザはChromeです。

Comments

[kei344]

質問文のコードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

[garudo]

失礼しました、修正しましたので確認をお願い致します。

Answer 1

まず、
PHPはサーバサイドで動作し、
javascript(ajaxはjavascriptの使い方の一つです)はクライアントサイド（ブラウザ上）で動作する
という全体像を理解しないと、javascriptとPHPで情報をやり取りすることはなかなか難しいかと思います。

これら一連の処理は全て同じPHPファイルで実行したいのです。

ファイルが同じか違うかは関係ありません。
同じファイルでも可能ですが、処理が違うなら別のファイルにした方が保守性等の観点から良いことが多いです。

webサイトが表示される時に行われる処理の順番としては、基本的には以下の様な順序です。
0. ブラウザがサーバにアクセスする
0. PHPが実行される
0. PHPによってブラウザにjavascriptを含むHTMLが渡される
0. ブラウザによってjavascriptが実行される

PHPが実行された後にjavascriptが実行されるため、javascriptの変数をPHPに渡すことは出来ません。

そのため、

ただ私はプログラムの知識が乏しいため、書いているコードがあっているかわかりません。そこで質問なのですが、ajaxの書き方はこれであっているでしょうか？

に端的に答えると、「コードの文法や記述方法は置いておいて、根本的にやろうとしていることに誤解がありそう」となります。

その代わりajaxならできるとのことだったので現在ajaxで行おうとしています。

「ajaxなら出来る」というのは、上記の処理に加えて、
ajaxを用いて以下の様な処理を行った場合を想定してのことだと思います。

ajaxの定義については「ajaxとは」あたりで検索して、この辺りを参照の事

1. ブラウザがサーバにアクセスする
2. PHPが実行される
3. PHPによってブラウザにjavascriptを含むHTMLが渡される
4. ブラウザによってjavascriptが実行される
5. javascriptがサーバ（PHP）にリロードを伴わずアクセスする（ajaxで変数情報をPOSTする）
6. PHPがjavascriptに対して結果を返す
7. javascriptがPHPからの結果を受け取って、その結果を使ってHTMLを書き換える
8. 以降、5-8を繰り返すと、リロードせずにPHPの結果を使ってページを書き換えることが出来る

この場合、2と6で2回PHPが動作していますが、ブラウザの使用者から見た場合、リロードしているわけではないので、一度アクセスしたら自動的にjavascriptでの処理がページに反映されるように見えます。

上記の処理がパッとイメージ出来ないようだと実際にプログラムを作成するのは難しいので、まずは
「ajax php 入門」あたりで検索して見てください。
わかりやすいサンプル記事がいくつか出てきますので、
例えば2番目に出てくるこことかわかりやすいと思います
実際に動かしてみて、まずは動作の理解を試みることをお勧めします。

Comments

[garudo]

詳しい説明をしていただきありがとうございます。いまいち理解できていなかったプログラムの処理の流れについて把握することができ、今私が行おうとしていることがそもそも間違っていることに気づきました。まだまだ自分はプログラムについて知らないことが多いと改めて実感しました。今回やろうとしていたことは諦めて、別の方法を考えるようにします。まずは、ajaxについてしっかり勉強していく所存です。

本当にありがとうございました。