JavaScriptの変数をPHPに渡したい

Question

###実現したい事
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
参考サイト

Comments

[m.ts10806]

文字列連結してみては。というかphp側のheaderって何のためにつけてます？

[kszk311]

「Origin」の前の「"」がいらないだけでは？

[aiueoaiueoaiue]

headerはつけないとJavaScript側でエラーが出るのです。

[aiueoaiueoaiue]

Originの前の"はコピペミスです。修正します。

[m.ts10806]

よくみたら構文エラーですねこれ

[kszk311]

test.phpを直接開くだけでは、「かきくけこ」だけしか表示されないのは正常です。
結果を返すということしかしていないので、直接見たら「」
JSが実行されているページの「console.log(html);」の場所で「こんにちはかきくけこ」となっていればOKだと思うんですけど…

[aiueoaiueoaiue]

PHP側で「こんにちは」を表示させたいんですけど、どうすればよいのでしょうか？

[m.ts10806]

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

[aiueoaiueoaiue]

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

[m.ts10806]

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

Answer 1

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

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

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

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

どういう事かというと、
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でブログシステムを作るような書籍を立ち読みしてみてください。

Comments

[m.ts10806]

コメントとそこの指摘で気づきましたが、ajaxで呼び出されるはずのtest.phpをブラウザから実行してるらしいです。

[miyabi-sun]

ありがとうございます。
質問文を見ながらそうなんだろうなぁと思って先受けした回答にしてます。

[m.ts10806]

なるほど。さすがです。

[miyabi-sun]

そっから先の味付けは想像しながらでなければ書けなさそうだったので、
mtsさんの回答もなるほどとおもって＋入れておきましたよ！

[m.ts10806]

mitではないですが^^;

[miyabi-sun]

＞＜；ごめんなさい

[m.ts10806]

いえいえ。大丈夫ですよ。

[aiueoaiueoaiue]

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

[miyabi-sun]

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

[aiueoaiueoaiue]

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

Answer 2

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("かきくけこ");