POST通信でファイル書き込みに成功するが、失敗時分岐のテキストが表示される（成功時テキストが出力されない

こちらのサイト
https://joyplot.com/documents/js-xmlhttprequest-post/

を参考に、POSTでデータを送信→受信側でテキストデータに書き込む処理を、
XMLHttpRequestを使用しならが実装しています。

いま、main.phpとtest.phpがあり、
main.phpからPOSTでデータを送り、sub.phpで受け取っています。

(送信データ)

    var postData = {
        "name": "名無しさん",
        "text": "This is a test!(" + new Date().toLocaleTimeString() + ")"
    };

上記を「name=名無しさん&text=This is a test!(8:30:34)」の形に整形済み（サイト参照

(sub.php)

<?php 

    // print_r($_POST);
    $ok = array( 'OK', 'です');
    $err = array( 'エラー', 'です');

    function console_log($data){
        echo '<script>';
        echo 'console.log('.json_encode($data).')';
        echo '</script>';
    }


    $name = $_POST['name'];
    echo $name;
    console_log($name);

    if (!empty($_POST['name']) && !empty($_POST['text'])) {
        echo "OK <br/>";
        console_log($ok);

        $name = $_POST['name'];
        $text = $_POST['text'];
        
        // POSTで送信されたデータを書き込む
        $filename = 'text.txt';
        $fp = fopen($filename, 'a');
        fwrite($fp, $name . ' : ' . $text . PHP_EOL);
        fclose($fp);
    }
    else {
        echo "エラー <br/>";
        console_log($err);
    }
?>

Firefoxの開発ツールのコンソールとEchoを利用してデバッグしています。
if文の中身が書き込み処理で、以外はだいたいデバッグテキストです。

sub.phpでデータを受け取ったところ、無事にファイルへの書き込みが行われています。
（main.php上でPOSTを行うたびに、ファイルが正常に追加書き込みされている）

ただ奇妙なことに、デバッグテキストで「else」文の中のエラーが毎回表示され、OKが表示されません。
POSTの中身を確認しても、nullとなっています（sub.phpのif文の前のecho）
Javascriptのコンソールでも同様です。

こちらなにが考えられますでしょうか。
デバッグの方法が悪いのでしょうか。

よろしくお願いいたします。

ーー追記ーー
main.phpのJavascriptの部分です。

        // POSTで送信するデータ
        var postData = {
            "name": "名無しさん",
            "text": "This is a test!(" + new Date().toLocaleTimeString() + ")"
        };
        
        var xhr = new XMLHttpRequest();  
        xhr.open("POST", "sub.php", true);
    
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        xhr.onreadystatechange = function() {
            if (this.readyState == XMLHttpRequest.DONE && this.status == 200) {
            // 送信に成功した時の処理
                console.log(this.statusText);
            }
            else {
                console.log( "エラーです" );
            }
        }
    
        var sendParam = "";
    
        for (var name in postData) {
            if (sendParam === "") {
                sendParam = name + "=" + postData[name];
            } else {
                sendParam += "&" + name + "=" + postData[name];
            }
        }
        xhr.send(sendParam);

これを関数としてwindow.confirmかonclickイベントで実行させます。

m.ts10806

2021/12/31 00:20

そもそも、非同期通信の返却値でJavaScript実行しようとしてること自体間違いなのですが（画面がないので出来ない）、そのあたりは認識問題ないですか？「出力全部」返ってくるので。デバッグしたいならデバッガかログ出力するしかないです。

webserviceNI

2021/12/31 00:25

コメントありがとうございます。 >非同期通信の返却値でJavaScript実行しようとしてること自体間違いなるほど、、ブラウザでEchoを表示したタイミングはデータ受信のタイミングとは違うということでしょうか。 >デバッグしたいならデバッガかログ出力するしかないです。ログ出力というのは、テキストファイルなどとして出力するということですよね。エラー自体は想定されるもので問題ないと理解しましたが大丈夫でしたでしょうか

webserviceNI

2021/12/31 00:27

ちょっと言葉足らずでした。デバッグは上記の処理ではできない（処理が正しく行われているかどうかは確認できない）ということですね

m.ts10806

2021/12/31 00:28

>なるほど、、ブラウザでEchoを表示したタイミングは非同期通信なのであれば「ブラウザで表示」ってないです。バックグラウンドで実行されるので。 >エラー自体は想定されるもので問題ないと理解しましたが大丈夫でしたでしょうかちょっとどこの何の話をしているのか分かりませんでした。

m.ts10806

2021/12/31 00:30

>デバッグは上記の処理ではできない（処理が正しく行われているかどうかは確認できない）結局「非同期処理で何を処理させて何を返したいか」によると思います。ファイル書き込みをしたい場合は「成否」のみを返すのが妥当かとは思いますが。あと、JavaScript側のコードも提示してください。

webserviceNI

2021/12/31 00:36

sub.phpは記載していませんが、htmlとbodyもあり、 echoはボディ内で表示されるようにしています。それでも表示はされないんですね（リロードして確認をしているのでだからダメなのか？ >>エラー自体は想定されるもので問題ないと理解しましたが大丈夫でしたでしょうか >ちょっとどこの何の話をしているのか分かりませんでした。ファイル書き込みのタイミングと合わせてechoやコンソールで確認しようとした、部分でした（ファイル書き込みではなく表示の部分 Javascriptはほとんど参考サイトそのままですが、、一応本文に追記しました

m.ts10806

2021/12/31 01:55

非同期で実行されるので「ブラウザから直接アクセス」というのはやってはいけません。ブラウザから直アクセスの場合はPOSTではなくGETです。先に書いたように画面と言う概念を持たないのが非同期処理で「バックグラウンドで実行される」ので、どうしてもJavaScriptで確認したいならリクエストを送信したJavaScript側で返却値を受け取ることです。なので、sub.phpのechoはjson_encode($data)のみにすることでしょうね。他のechoはむしろ邪魔になっています。結果を確認するのはmain.phpでリロード不要（バックグラウンド実行だから）。 console.log()でレスポンスを出力しているのでブラウザ開発ツールのコンソールを確認してください。

webserviceNI

2022/01/02 06:09

返信遅れてすいません。 >どうしてもJavaScriptで確認したいならリクエストを送信したJavaScript側で返却値を受け取ることです。なるほど。main.phpでPOST送信に対する返却値で良いでしょうか。 XMLHttpRequestの返却処理を確認してみます。ありがとうございますm(_ _)m