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

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

ただいまの
回答率

88.92%

JavaScriptの変数をPHPに渡したい

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 678

aiueoaiueoaiue

score 90

実現したい事

JavaScriptの変数をAjax通信を用いてPHPに渡し、ちゃんと値が渡されているか確認するためにそれをブラウザで表示させたいのですが、上手くいきません。解決策が分かる方回答お願いします。

ローカル側のJavaScript

//test.js
var url = "test.phpのある場所"
$.ajax({
  url: url,
  type: "POST",
  data: {"item": "こんにちは"},
      success: function(html) {
     console.log(html);
  },
  error: function(err) {
    console.log("エラーです");
    }
});

サーバ側のPHP

//test.php
<?php
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept");
$item = $_POST['item'];
print($item);
print("かきくけこ");
?>

実行方法

サーバ側でtest.phpをFirefoxで開く。→「かきくけこ」とだけ表示される。(JavaScriptで代入した「こんにちは」が表示されない)

補足

PHP5.6
参考サイト

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • m.ts10806

    2018/08/22 16:01

    回答編集しました。test.php開いてもajaxの通信の確認はできません。js実行されてないですよね。

    キャンセル

  • aiueoaiueoaiue

    2018/08/22 16:03

    ローカル側のJavaScriptには「こんにちはかきくけこ」とコンソールに表示されているのですが、なぜ実行されていないのでしょうか?

    キャンセル

  • m.ts10806

    2018/08/22 16:15

    ローカルとは?確認手順がゴチャゴチャしてきたので整理していただけますか?書かれている内容ではtest.phpを直接確認したり、javascriptファイルを直接確認しているように見えてしまいます。正確に情報をください。

    キャンセル

回答 2

checkベストアンサー

+4

サーバ側でtest.phpをFirefoxで開く。
→「かきくけこ」とだけ表示される。(JavaScriptで代入した「こんにちは」が表示されない)

これは以下の手順でしょうか?

  • 1. test.jsのページをFireFoxで開いてAjax通信を実行
  • 2. 通信終了後、Firefox上部のURL欄をtest.phpのURLに変更して移動
  • 3. かきくけこしか表示されない

これは通常の挙動になります。

どういう事かというと、
test.js内で送信したAjax通信に盛り込まれたPOSTデータは、その時限りの通信で利用されます。
したがってAjax通信のconsole.log(html);の箇所ではこんにちはかきくけこになっているはずで、
その後にFirefoxで開いたときはPOSTデータを何も指定していませんので、かきくけこのみを取得出来るはずです。

基本的にFirefoxを始めとしたブラウザはBrowse(拾い読みする)事を実現するためのツールです。
従って、基本的に行う事はWebサイトの情報をダウンロードして閲覧するためにGETリクエストを投げる事であって、
POSTはフォーム画面に入力して実行するような特殊なケースでしか利用されません。

なのでブラウザでPOST通信の挙動を確かめるというのは中々難しいのです。
Firefoxに搭載されているデベロッパーツールの使い方をもっと深く知る事で、
Ajax通信時に具体的に何をやっているのかを詳しくチェック出来るようになります。
調べてみてください。

他にもPOST通信を行うツールというのは沢山ありますので、
そういうソフトを利用しても良いかもしれませんね。
Firefoxではありませんが、Chromeの拡張機能を見つけましたので載せておきます。

ブラウザから手軽にHTTPリクエストを送信するChrome拡張『Advanced REST client』


PHPでこんにちはも表示したいのですが

これをどういう意味で発言しているのかによります。

  • FirefoxでPOST通信を再現してこんにちはかきくけこと表示されることを確認したい
  • Ajax通信終了後、test.phpへ移動したブラウザにこんちにはかきくけこを表示させたい

前者は上記の章で解説しているので割愛しますが、問題は後者です。
これは難易度が一気に上がります。

軽く解説

PHPは通信毎にプログラムが完全に分離されており、通信発生毎にPHPというソフトウェアが立ち上がり通信を解析して結果を返す作りになっています。
(実際にはApacheというPHPの裏で動いているWebサーバソフトが、予めPHPのソフトウェアを並列で4〜8台起動して準備して待っている作りなので高速に動作しているように見えますけどね)

従ってAjax通信とブラウザで開いたときは変数の値等が全てクリアされてしまっているので、
以下のような手法で情報を次に引き継ぐ必要があります。

  • セッションを利用してAjaxで受け取ったPOST文字列を保存する
  • MySQL等のデータベースを立ち上げて、Ajaxで受け取ったPOST文字列を保存する

セッションを利用する際はAさんのFirefoxなら情報が受け継がれますが、BさんのFirefoxやAさんのChromeには情報が引き継がれません。

一般的にブログや掲示板、SNS等のシステムでは
MySQL等のデータベースを使ってこのAjax通信時のPOST文字列を保存する事が一般的ですが、
これはかなり大掛かりかつ難易度の高い実装となります。

この解答欄で解説仕切ることは無理なので、書店へ出向いてPHP+MySQLでブログシステムを作るような書籍を立ち読みしてみてください。

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/08/22 17:09

    つまりはAさんのChromeからAjax通信で情報を送っても、BさんのFirefoxにはにはAさんが送った情報はセッションでも引き継がれないということでいいですか?

    キャンセル

  • 2018/08/22 17:16

    そのとおり!
    セッションは基本的にユーザーのログイン情報を保存する所ですからね。
    例えばTwitterであなたがログインした後に、私がそのログイン情報を使って勝手なツイートし始めたら超困りますよね?
    なのでセッションに保存した情報はそのブラウザでしか引き出せません。

    キャンセル

  • 2018/08/22 17:25

    分かりました。ありがとうございました。

    キャンセル

+3

test.phpはあくまでajaxにより呼び出されるものであり、アクセスすべきはそのjs処理を書いたURL(HTMLとか)です。
非同期処理はアクセスしている画面から画面遷移を伴うことなく通信できる仕組みです。
別途サーバー側の処理を呼び出します。
今回用意したtest.phpを直接開いても送信される情報はきていないため提示のようになるのは当然です。

※下記は質問者さんとは違う、本来やるべき手順です。

下記で試しましたが再現しませんでした。
※適当なHTMLにjsを書いてブラウザでHTMLにアクセスして確認

phpの方はheader()がなくてもエラーは出ませんでしたし、
あってもコンソールでは「こんにちはかきくけこ」と出力されています。

$.ajax({
      url: "test.php",
      type: "POST",
      data: {"item": "こんにちは"},
          success: function(html) {
         console.log(html);
      },
      error: function(err) {
        console.log("エラーです");
        }
    });
<?php
$item = $_POST['item'];
print($item);
print("かきくけこ");

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

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

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

関連した質問

同じタグがついた質問を見る