PHP AjaxでPOSTデータを受け取りたい

こちらのページを参考にテストを行っているのですが
post結果が取得できず、アドバイスいただきたく質問させていただきました。

まず、前提としてjsはphpファイル内にecho <<<EOMで書いており、
post結果は同一ページ(同じphpファイル）で取得したいと思っています。

現在は下記のようにテストをしていますが、
postはされる（リロード？）ものの、echoで出力される結果はnullになっています。

参考ページで変えたところは
xhr.open('POST','foobar.php');
となっていたところを、同一ページなので省略でいいかな？と思って
xhr.open('POST');
としているくらいです。

初歩的な質問かもしれませんが、
是非アドアイスいただければと思います。
よろしくお願いいたします

php
1
2<?php
3
4$foo = isset($_POST['foo']) ? $_POST['foo'] : null;
5echo $foo ;
6
7echo <<<EOM
8<script type="text/javascript">
9
10 $(document).ready(function(){
11
12   var _returnValues;
13   function postSend() {
14     var fd = new FormData();
15     fd.append('foo',"OK");
16     var xhr = new XMLHttpRequest();
17     xhr.open('POST');
18     xhr.send(fd);
19     xhr.onreadystatechange = function(){
20        if ((xhr.readyState == 4) && (xhr.status == 200)) {
21            _returnValues = JSON.parse(xhr.responseText);
22        }
23     };
24   }
25
26 }
27
28</script>
29EOM;
30

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

回答1件

ベストアンサー

Ajaxは非同期通信でサーバー側の処理をさせるものなので、
呼び出し元と呼び出し先が同じソースコードでするのは悪手でしかありません。
できないことはないですが、画面出力とAjaxで呼び出される処理とリクエストを明示的に分ける必要があります。
なぜならAjaxで呼び出された処理の「出力すべて」が返却値になるからです。

提示のコードだとfooに「test」と送信された場合、返却値は下記のようになります。

text
1test
2
3<script type="text/javascript">
4
5 $(document).ready(function(){
6
7   var _returnValues;
8   function postSend() {
9     var fd = new FormData();
10     fd.append('foo',"OK");
11     var xhr = new XMLHttpRequest();
12     xhr.open('POST');
13     xhr.send(fd);
14     xhr.onreadystatechange = function(){
15        if ((xhr.readyState == 4) && (xhr.status == 200)) {
16            _returnValues = JSON.parse(xhr.responseText);
17        }
18     };
19   }
20
21 }
22
23</script>