質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.00%

ajaxでphpに値を渡したい

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 534

garudo

score 10

プログラム初心者です。
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です。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2017/06/07 00:48

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

    キャンセル

  • garudo

    2017/06/07 01:13

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

    キャンセル

回答 1

checkベストアンサー

+3

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

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

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

webサイトが表示される時に行われる処理の順番としては、基本的には以下の様な順序です。

  1. ブラウザがサーバにアクセスする
  2. PHPが実行される
  3. PHPによってブラウザにjavascriptを含むHTMLが渡される
  4. ブラウザによって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番目に出てくるこことかわかりやすいと思います
実際に動かしてみて、まずは動作の理解を試みることをお勧めします。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/06/07 23:47 編集

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

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.00%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる