ajaxを使ってPHPにデータを受け渡したい。

Question

初心者のものです。
現在、ajaxを用いて、JavaScriptからPHPへデータを
受け渡そうとしているのですがうまく表示が出来ないようです。

JS側ではsuccessとなるみたいなので、PHP側で問題が
あるのではないかと考えています。

ご教授頂ける方がおりましたら、何卒アドバイス宜しくお願い致します。

コードは以下の通りとなります。

$.ajax({
          type: 'POST',
          url: './test.php',
          dataType:'text',
          data: {
            name1 : "a"
          },
          success: function() {
            alert("成功");
            location.href = "./test.php";
          }
        });

test.php

<?php
if (isset($_POST["name1"])) {
    echo $_POST['name1'];
} else {
  echo "値が入力されていません";
}

 ?>

Answer 1

回答ではなく、確認方法です。
php側のechoを確認するには、以下の手順で確認が可能です。

• ChromeでF12を押してデバッグモードにする
• Networkタブをクリック
• ajaxのトリガーを叩くと、アクセス先のphpファイル名が表示されるのでそれをクリック
• headersにPOST内容が表示される
• Responseにecho(等のphpのレスポンス)が表示される

デバッグするとき結構便利です。

Comments

[jesushill]

ありがとうございます。networkタブは初めてつかいました。使いこなすのは慣れが必要ですが、非常に便利ですね！

Answer 2

PHPには値が渡せてます。

以下でやってみてください。

$.ajax({
  type: 'POST',
  url: './test.php',
  dataType:'text',
  data: {
    name1 : "a"
  },
  success: function(data) {
    alert("success");
    //location.href = "./test.php";
  }
});

success関数の引数のdataにechoされた値が戻ってきているはずです。

Comments

[jesushill]

回答ありがとうございます。知識不足のところがあり、ご確認したい点があります。
alert("success")でなく、alert(data)でためしたところ、"a"が戻ってきました。
1.alert(data)とした際、"a"が戻ってきたのは、
　PHPからの受け渡しとして理解してよいのでしょうか？
2.PHP文では、データの受け渡しをechoすることが出来ないのですが、これは
　$_POST['name1']という受け渡し方に問題があるのでしょうか。
長文になり、大変申し訳ございません。
もし、ご回答いただけましたら幸いです。

[kentei_syunrai]

>1.alert(data)とした際、"a"が戻ってきたのは、PHPからの受け渡しとして理解してよいのでしょうか？

PHPが返してきた結果です。試しに送るデータをbとかに変えたらbが返ってくると思いますよ。

>2.PHP文では、データの受け渡しをechoすることが出来ないのですが、これは$_POST['name1']という受け渡し方に問題があるのでしょうか。

いや、渡し方も間違っていないですし、echoできているからsuccessで戻ってきます。

[nobuzoh]

ajaxと通常の画面遷移とを混同されているようですね。

kentei_syunrai さんの仰るとおり、
ajaxによって値を受け取っているtext.phpは見えない裏で動いています。
このtext.php内のデータがどのようになっているのかをデバックする（知る）には
現在やられているようにjavascript側でalertをだしたり、
text.php内ではerror_logなどでファイルに出力するなどの方法があります。

現状は何も間違っていませんので、
ajaxとlocation.hrefの違いを理解することと、
上記のようにajaxで呼び出すphpのデバッグ方法を覚えれば
解決できるのでは、と思います。

[jesushill]

お二方、コメント頂きましてありがとうございます。
今までの私の理解では、
ajax　PHPデータ渡し -> test.php へデータ受領かつ保持
という理解でしたが、
ajax　PHPへデータ渡し->PHPファイルへ(データ受けた後、当該ファイル記述内容処理)　
という流れみたいですね
※誤りがあれば教えて下さい。
とはいえ、データが受け取った変数をデータベースに書き込む処理を追加して
確認してみたいと思います。

お二方、物覚えが悪い者に丁寧にコメントくださり、ありがとうございます！

[nobuzoh]

ajaxを使おうと使いまいとphpがやること、やれることに変わりはないです。

ajaxは非同期通信でデータ等のやり取りをするのに用います。
「ajax 非同期通信とは」などで検索するとその説明を見ることができます。
私は非同期通信＝画面遷移する必要がない、と解釈しています。

ajaxを使った（非同期通信の）場合、
画面遷移することなくjavascriptからtest.phpにデータを渡し、
test.phpの出力結果を同じjavascript内で受け取って処理することができます。

ajaxを使わない（同期通信）場合、
test.phpに画面遷移し、test.phpの出力結果が表示されます。
location.href()やformのsubmitなど基本的にはこっち側にあたります。

普通は初学者は同期通信を「同期通信」という言葉も知らないで勉強し、
必要に迫られてajaxなどの非同期通信を知ることになるのですが、
jesushillさんはいきなりajaxから入ったようですね。
今時はそういう方も多いのかもしれませんね。

[jesushill]

nobuzohさん、詳細な説明頂きましてありがとうございます。仰るとおり、PHPはGWから勉強をしている初学者です。今はなんとかPHPを使えるよう、頑張っている最中です汗
非同期通信、同期通信といった言葉は知っていても、実際に使ってみると、「あー自分はよくわかっていないんだな」と実感しました。。

Answer 3

私、こうやってまーす^^

$.ajax({
  type: 'POST',
  url: './test.php',
  dataType:'text',
  data: {
    name1 : "a"
  },
  success: function(response) {
    alert(response);
    //location.href = "./test.php";
  }
});

<?php
try {
	if (isset($_POST["name1"])) {
	$str = $_POST['name1'];
	} else {
	$str = '値が入力されていません';
	}
	throw new PDOException();
} catch (PDOException $e) {
	exit($str.$e->getMessage());
}

こうやっとけば phpのエラーコードもレスポンスしてくれるから便利なんですよ^^

Comments

[jesushill]

ご回答頂きましてありがとうございます。
エラーコードをレスポンスというのはエラーログでしょうか？
ド基本ですみません。。

[退会済みユーザー]

エラーメッセージだけですね

エラーログ全ての情報が欲しい場合は
$str =　error_log("エラー確認！", 0);
ってしておけばいいんじゃないでしょうか？

[jesushill]

おおっありがとうございます。エラーログすらわかっていなかったんで、助かります！

Answer 4

Ajax というか、JavaScript の XMLHttpRequest は
あくまで「裏」で動くものなので、ブラウザに echo はムリです。
確認するなら、例えば適当なファイルに書き込んでみるとかですかね。

<?php
if (isset($_POST["name1"])) {
    $str = $_POST['name1'];
} else {
    $str = '値が入力されていません';
}
file_put_contents('hoge.log', $str);
?>

Comments

[jesushill]

回答ありがとうございます。回答頂きましたコードで試してみたところ、PHP側で値が入力されていないことがわかりました。
ajax側ではsuccessまでいくのですが、php側へ送るデータの型などに問題があるのでしょうか。。