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

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

ただいまの
回答率

88.91%

ajaxでのjavascriptファイルからPHPファイルへの値渡しがうまくいきません。

解決済

回答 5

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 20K+

chibi

score 20

ページを更新させずにjavascriptファイルからPHPファイルへの値渡しをしたくて、ajaxで非同期通信をしようとしているのですが、[null,null]という値しか渡ってきません。
successの場合にコンソールに「ajax通信に成功しました」と表示されるようにしていて、それは表示されているので通信はしているのだと思います。
どうすればjavascriptファイルの変数の値がPHPファイルで取得できるようになるでしょうか?

index.php
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="x-ua-compatible" content="IE=Edge" />
    <meta name="viewport" content="width=device-width, user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <title>仮のタイトル</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

    <script type="text/javascript" src="main.js"></script>
    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
        }
    </style>

    <?php
        require("ajax.php");
    ?>

</head>
<body>
</body>
</html>
main.js
jQuery(function($){
    //ajax送信
    $.ajax({
        url : "ajax.php",
        type : "POST",
        dataType:"json",
        data : {post_data_1:"hoge", post_data_2:"piyo"},
        error : function(XMLHttpRequest, textStatus, errorThrown) {
            console.log("ajax通信に失敗しました");
        },
        success : function(response) {
            console.log("ajax通信に成功しました");
            console.log(response[0]);
            console.log(response[1]);
        }
    });
});
ajax.php
<?php
//ajax送信でPOSTされたデータを受け取る
$post_data_1 = $_POST['post_data_1'];
$post_data_2 = $_POST['post_data_2'];
//受け取ったデータを配列に格納
$return_array = array($post_data_1, $post_data_2);
//「$return_array」をjson_encodeして出力
echo json_encode($return_array);
?>
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • kei344

    2017/03/23 11:43

    回答が付いた質問の編集は慎重に行ってください。質問文のコードについて回答にて指摘があった場合は「追記」し、元のコードを編集する場合も「直したこと」がわかるようにしてください。

    キャンセル

回答 5

checkベストアンサー

+9

 修正

まずajaxの通信先と、jsを読み込んで実行するページは別にしてください。HTMLを表示するためのphpと、Ajax通信するためのphpが一緒のファイルだとわけの分からない動作になります。仮にAjax通信のためのファイルをajax.phpとして、ページ表示のためのファイルをindex.phpとして、Ajax通信を行うJavaScriptファイルをmain.jsとして下記に記述します。

 index.php

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="x-ua-compatible" content="IE=Edge" />
    <meta name="viewport" content="width=device-width, user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <title>仮のタイトル</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="http://code.jquery.com/jquery.js"></script>
    <script type="text/javascript" src="main.js"></script>
    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>

</body>
</html>

 ajax.php

<?php
//ajax送信でPOSTされたデータを受け取る
$post_data_1 = $_POST['post_data_1'];
$post_data_2 = $_POST['post_data_2'];
//受け取ったデータを配列に格納
$return_array = array($post_data_1, $post_data_2);
//ヘッダーの設定
header('Content-type:application/json; charset=utf8');
//「$return_array」をjson_encodeして出力
echo json_encode($return_array);

?>

 main.js

jQuery(function($){
    //ajax送信
    // **********************
    // URLをajax.phpにすること
    // **********************
    $.ajax({
        url : "ajax.php",
        type : "POST",
        data : {post_data_1:"hoge", post_data_2:"piyo"},
        error : function(XMLHttpRequest, textStatus, errorThrown) {
            console.log("ajax通信に失敗しました");
        },
        success : function(response) {
            console.log("ajax通信に成功しました");
            console.log(response[0]);
            console.log(response[1]);
        }
    });
});

あと、このAjaxの書き方はかなり古い時代の書き方です。jQuery1.8以降はこう書きます。

$.ajax({
    url : "ajax.php",
    type : "POST",
    data : {post_data_1:"hoge", post_data_2:"piyo"}
}).done(function(response, textStatus, xhr) {
    console.log("ajax通信に成功しました");
    console.log(response[0]);
    console.log(response[1]);
}).fail(function(xhr, textStatus, errorThrown) {
    console.log("ajax通信に失敗しました");
});

もう一点、よく見たらjQuery2回読み込んでるじゃないですか…1回で十分です。jQueryは2回以上読み込むとわけのわからない動作になります。たとえ同一バージョン、同一ファイルであってもです。

<script src="http://code.jquery.com/jquery.js"></script>


この行を消してください。あと、こういった「外部のサイトのファイル」を勝手に使うのはご法度です。外部公開用のCDNや、googleapisの埋め込み用はいいですが、他者のサイトのjsを勝手に読み込んだりすると、そのサイトの人に不要なアクセス負荷がかかりますしやめましょう。

 追記

AjaxでPHPにデータを飛ばしても、それは「Ajaxに対するレスポンス」が変わるだけで、現在表示されている「ページ」が変わるわけではありません。一般的に、TwitterやFacebookのように「ページの再読み込みをせずに、内容だけ書き換わっていく」処理は、更新するためのデータをPHPからもらいページの書き換えはJavaScriptで行います。
index.phpを元ページ、ajax.phpを更新データ用PHP、main.jsをページ更新用処理として説明します。

index.php

<!--省略-->
<body>
    <div id="response0"></div>
    <div id="response1"></div>
</body>


元ページにresponse0、response1というdivを記述しておくことで、ajaxからのレスポンスを入れる箱を用意します。

ajax.php

<?php
//ajax送信でPOSTされたデータを受け取る
$post_data_1 = $_POST['post_data_1'];
$post_data_2 = $_POST['post_data_2'];
//受け取ったデータを配列に格納
//そのまま返すだけだと伝わりにくいので、文字を加工して返す
$return_array = array("PHPに送られたpost_data_1:".$post_data_1, "PHPに送られたpost_data_2:".$post_data_2);
//ヘッダーの設定
header('Content-type:application/json; charset=utf8');
//「$return_array」をjson_encodeして出力
echo json_encode($return_array);

?>


AjaxからPHPに送られてきた値を元に、元ページに表示するためのデータをPHPの中で作成して、Ajaxにレスポンスとして返します。

main.js

jQuery(function($){
    //ajax送信
    // **********************
    // URLをajax.phpにすること
    // **********************
    $.ajax({
        url : "ajax.php",
        type : "POST",
        data : {post_data_1:"hoge", post_data_2:"piyo"}
    }).done(function(response, textStatus, xhr) {
        console.log("ajax通信に成功しました");

        //responseにはajax.phpが返したレスポンスが入っている

        // 元ページのresponse0のdivに、PHPから返されたresponse[0]を入れる
        $("#response0").text(response[0]);

        // 元ページのresponse1のdivに、PHPから返されたresponse[1]を入れる
        $("#response1").text(response[1]);

     }).fail(function(xhr, textStatus, errorThrown) {
        console.log("ajax通信に失敗しました");
    });
});


最後に、ajax通信で受け取ったレスポンスを使って、元ページを書き換えます。

PHPの動作、JavaScriptの動作を理解していないようなので

PHPを事務員、ブラウザをあなたに例えて話をしましょう。

事務員さんにあなたはindex.phpという書類を紙に書いて自分に渡してくれと頼みました。事務員さんは自分の手元にあるindex.phpというお手本を元に、紙に書き込んであなたに渡しました(レスポンス)。その後、あなたは事務員さんに「ちょっとここ変えたいから書き直して」とお願いしても、PHPさんは事務処理上もう渡しちゃった紙(レスポンス)を書き直すことはできません。事務員さんに紙を書き直して、と頼むことはそれはすなわちブラウザのリロードです。部分的に書き換える処理がしたいのであれば、あなた(ブラウザ)の持つ修正用のペン(JavaScript)とajaxという手続きを使います。あなた(ブラウザ)は「じゃあこういうデータを渡すから、書き直す内容だけ教えて(ajax)」と頼みます。すると事務員さんはあなたから渡されたデータ(POSTデータ)を元に、書き直すべき内容をあなた(ブラウザ)に教えてくれます(Ajaxに対するレスポンス)。あなたは自分が使うことのできる修正用のペン(JavaScript)を使って、もらった内容を元に書き換えるのです。

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/03/23 08:12

    コンソールログでは"hoge","piyo"とちゃんと出るのに、phpではnull,nullと出ます。

    キャンセル

  • 2017/03/23 09:48

    ちょっと待ってください。もしかしていままでnull,nullが返ってくると言っているのはPHPの話だったのですか?

    キャンセル

  • 2017/03/23 10:47

    はい。。。

    キャンセル

+1

echo $post_data_1 = $_POST['post_data_1'];

こういう書き方できたかな…?
とりあえずechoを取って普通に変数に入れて見たらどうでしょうか?

後いくつか疑問といいますか、直した方が良さそうなところがあったのだそれも追記しておきます。

1
jQueryが2つ読み込まれているので1つだけにした方がいいです。

2
多分ajaxの結果はjsonで出力したいのだと思いますので、htmlタグは不要なので取った方がいいと思います

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/03/22 08:48 編集

    回答していただきありがとうございます!

    ehoを取ってみましたが、状況変わらずです。

    $post_data_1 = $_POST['post_data_1'];
    $post_data_2 = $_POST['post_data_2'];

    >jQueryが2つ読み込まれているので1つだけにした方がいいです。

    1つにしてみましたが、null,nullしか渡ってきません。
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

    >2
    多分ajaxの結果はjsonで出力したいのだと思いますので、htmlタグは不要なので取った方がいいと思います

    すみません。どこのhtmlタグのことでしょうか?また、出力できれば、jsonじゃなくても大丈夫です。

    キャンセル

+1

とりあえずこうしてみてください

<?PHP
if($_SERVER["REQUEST_METHOD"]=="POST"){
  $post_data_1 = filter_input(INPUT_POST,'post_data_1');
  $post_data_2 = filter_input(INPUT_POST,'post_data_2');
  $return_array = array($post_data_1, $post_data_2);
  header('Content-type:application/json; charset=utf8');
  echo json_encode($return_array);
  exit;
}
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="x-ua-compatible" content="IE=Edge" />
<meta name="viewport" content="width=device-width, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<title>仮のタイトル</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function(){
  $.ajax({
  url : "index.php",
  type : "POST",
  data : {post_data_1:"hoge", post_data_2:"piyo"},
  error : function(XMLHttpRequest, textStatus, errorThrown) {
    console.log("ajax通信に失敗しました");
  },
  success : function(response) {
    console.log("ajax通信に成功しました");
    console.log(response[0]);
    console.log(response[1]);
  }
  });
});
</script>
<style type="text/css">
body {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
test
</body>
</html>

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/03/23 11:27

    targetをiframeにすると、リロードはされないのですが、値が取得できなくなってしまいました。

    キャンセル

  • 2017/03/23 11:31

    編集してしまってすみません。追記すればよかったです…。以前の状態から、ファイルを3つに分けたのですが、javascriptファイルからPHPファイルに値を送りたいという意図は変わっていません。

    キャンセル

  • 2017/03/23 11:37

    htmlの部分を

    <body>
    <div id="data"></div>
    </body>

    として、ajaxの表記の部分を

    success : function(response) {
    console.log("ajax通信に成功しました");
    $('#data').text(response);
    }
    としてください。

    ajaxを理解していないならこれ以上やっても無駄です。
    一度基礎を学習してからトライされたほうがよいとおもいますよ

    キャンセル

0

PHP は知らない自分がレスするのもなんですが(jQuery.ajax の方は多少分かりますが)・・・

data : {post_data_1:"hoge", post_data_2:"piyo"},

data として渡しているのは JavaScript オブジェクトですね。Web サーバーには JSON 文字列にシリアライズしてコンテンツに含めて渡したい(POST したい)のだと思いますが、そうだとするとそこは JavaScript オブジェクトではなく JSON 文字列にする必要があるのでは?

その理由は以下の記事を見てください。

jQuery.ajax の data の型
http://surferonwww.info/BlogEngine/post/2015/10/05/what-must-be-set-to-data-option-in-jquery-ajax.aspx

上の記事にも書いてありますが、Fiddler などのキャプチャツールを使って、要求ヘッダやコンテンツを見ると何かヒントが得られるかもしれません。

あと、contentType: "application/json; charset=utf-8" の設定がないとうまくいかないということが自分のケースではありました。

質問者さんのケースでは違うかもしれませんが、ご参考まで。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/03/22 12:44

    提示いただいた URLの「Examples:」では application/x-www-form-urlencoded 形式に変換されたデータ(JSON 文字列ではなく)を POST することになるはずですが、その形式で受け取れるサービスも当然あるということのようですね。

    自分は POST データは必ず JSON 文字列で受け取るという ASP.NET 頭なので視野が狭かったようです。

    キャンセル

  • 2017/03/22 12:56

    ASP.NETはそうなのですね。application/x-www-form-urlencoded はForm要素の初期値なので、多くのサービス/言語で受け取れると思いますよ。

    【HTMLタグ/フォームタグ/送信時のデータ形式を指定する - TAG index】
    http://www.tagindex.com/html_tag/form/form_enctype.html

    キャンセル

  • 2017/03/22 13:07

    すみません、誤解を招くことを書いてしまいました。

    jQuery.ajax ⇒ REST ⇒ Web サービス/Web API/WCF ⇒ POST データは JSON 文字列・・・というように、jQuery.ajax から始まるとそういう発想になってしまうという自分の視野の狭さの問題です。

    もちろん、ASP.NET でも、Web Forms/MVC では、application/x-www-form-urlencoded 形式は POST データを送信する際の標準です。

    キャンセル

0

イメージです。データを送信して帰ってくるhtmlをA、送られてきたデータを処理するPHPをBとします。AがBにhogeというデータを送るとします。Bはhogeを受け取り、それを使いPHPに書類のような形でhogeを出します。それをAが見てこんなのが来てるなということで、それを受け取りなんかするならします。Aが処理が終わったらBはそれを処分します。Bは書類を作って渡すという作業をするだけで、自分自身のところには何も残しません。なのでいくらBを見ても、Aの処理が終わった後なのでBには何も残っていません。Aから送られてきた時にBで何か障害が出ればエラー表示くらいしてくれるかもしれませんが、基本Bを見ても値が送られて来てるかわかりません。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/03/23 09:38

    そうですね。

    キャンセル

  • 2017/03/23 09:49

    index.phpのhtmlに出力はできますか?

    キャンセル

  • 2017/03/23 09:51

    話が無限ループするようならもう何も言いません。

    キャンセル

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

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

関連した質問

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