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

PHP
1index.php
2<!DOCTYPE html>
3<html>
4<head>
5    <meta charset="UTF-8" />
6    <meta http-equiv="x-ua-compatible" content="IE=Edge" />
7    <meta name="viewport" content="width=device-width, user-scalable=no" />
8    <meta name="apple-mobile-web-app-capable" content="yes" />
9    <title>仮のタイトル</title>
10    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
11
12    <script type="text/javascript" src="main.js"></script>
13    <style type="text/css">
14        body {
15            margin: 0;
16            padding: 0;
17        }
18    </style>
19	
20	<?php
21		require("ajax.php");
22	?>
23	
24</head>
25<body>
26</body>
27</html>

JavaScript
1main.js
2jQuery(function($){
3    //ajax送信
4    $.ajax({
5        url : "ajax.php",
6        type : "POST",
7		dataType:"json",
8        data : {post_data_1:"hoge", post_data_2:"piyo"},
9        error : function(XMLHttpRequest, textStatus, errorThrown) {
10            console.log("ajax通信に失敗しました");
11        },
12        success : function(response) {
13            console.log("ajax通信に成功しました");
14            console.log(response[0]);
15            console.log(response[1]);
16        }
17    });
18});

PHP
1ajax.php
2<?php
3//ajax送信でPOSTされたデータを受け取る
4$post_data_1 = $_POST['post_data_1'];
5$post_data_2 = $_POST['post_data_2'];
6//受け取ったデータを配列に格納
7$return_array = array($post_data_1, $post_data_2);
8//「$return_array」をjson_encodeして出力
9echo json_encode($return_array);
10?>

kei344

2017/03/23 02:43

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

行動規範の内容に同意します

回答5件

ベストアンサー

修正

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

index.php

HTML
1<!DOCTYPE html>
2<html>
3<head>
4    <meta charset="UTF-8" />
5    <meta http-equiv="x-ua-compatible" content="IE=Edge" />
6    <meta name="viewport" content="width=device-width, user-scalable=no" />
7    <meta name="apple-mobile-web-app-capable" content="yes" />
8    <title>仮のタイトル</title>
9    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
10    <script src="http://code.jquery.com/jquery.js"></script>
11    <script type="text/javascript" src="main.js"></script>
12    <style type="text/css">
13        body {
14            margin: 0;
15            padding: 0;
16        }
17    </style>
18</head>
19<body>
20
21</body>
22</html>

ajax.php

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

main.js

JavaScript
1jQuery(function($){
2    //ajax送信
3    // **********************
4    // URLをajax.phpにすること
5    // **********************
6    $.ajax({
7        url : "ajax.php",
8        type : "POST",
9        data : {post_data_1:"hoge", post_data_2:"piyo"},
10        error : function(XMLHttpRequest, textStatus, errorThrown) {
11            console.log("ajax通信に失敗しました");
12        },
13        success : function(response) {
14            console.log("ajax通信に成功しました");
15            console.log(response[0]);
16            console.log(response[1]);
17        }
18    });
19});

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

JavaScript
1$.ajax({
2    url : "ajax.php",
3    type : "POST",
4    data : {post_data_1:"hoge", post_data_2:"piyo"}
5}).done(function(response, textStatus, xhr) {
6    console.log("ajax通信に成功しました");
7    console.log(response[0]);
8    console.log(response[1]);
9}).fail(function(xhr, textStatus, errorThrown) {
10    console.log("ajax通信に失敗しました");
11});

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

HTML
1<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

HTML
1<!--省略-->
2<body>
3    <div id="response0"></div>
4    <div id="response1"></div>
5</body>

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

#ajax.php

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

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

#main.js

JavaScript
1
2jQuery(function($){
3    //ajax送信
4    // **********************
5    // URLをajax.phpにすること
6    // **********************
7    $.ajax({
8        url : "ajax.php",
9        type : "POST",
10        data : {post_data_1:"hoge", post_data_2:"piyo"}
11    }).done(function(response, textStatus, xhr) {
12        console.log("ajax通信に成功しました");
13
14        //responseにはajax.phpが返したレスポンスが入っている
15
16        // 元ページのresponse0のdivに、PHPから返されたresponse[0]を入れる
17        $("#response0").text(response[0]);
18
19        // 元ページのresponse1のdivに、PHPから返されたresponse[1]を入れる
20        $("#response1").text(response[1]);
21
22     }).fail(function(xhr, textStatus, errorThrown) {
23        console.log("ajax通信に失敗しました");
24    });
25});

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

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

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

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

投稿2017/03/22 00:59

編集2017/03/23 02:37

masaya_ohashi

総合スコア9210

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

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

修正

index.php

ajax.php

main.js

追記

関連した質問