53561


いつもお世話になっています。  
下記の質問についてご存知の方がいらっしゃいましたらご教示を願います。

* * *

### 【質問の主旨】

下記のPHPとJavaScriptのコードを用いて、`fetch_json.php`にアクセスした時のコンソール画面に、「こんにちは echizenya
さん」と表示させるためにはどうすれば良いでしょうか?

  * [PHP](https://github.com/echizenyayota/ch10/blob/master/fetch_json.php)

[code]

    <?php
    $data = json_decode(file_get_contents('php://input'));
    print('こんにちは' . $data->name . 'さん！');
    
[/code]

  * [JavaScript](https://github.com/echizenyayota/ch10/blob/master/scripts/fetch_json.js)

[code]

    let data = { mid: 'y001', name: 'echizenya', age: 43};
    
    // JSON
    fetch('fetch_json.php', {
        method: 'POST',
        headers: {
            'content-type':  'application/json',
        },
        body: JSON.stringify(data),
    })
        .then(function(response) {
            return response.text();
        })
        .then(function(text) {
            console.log(text);
        });
    
[/code]

### 【質問の補足】

【質問の主旨】に対して下記の4点を補足説明します。

1.  
現在、ローカル開発環境上で`fetch_json.php`を実行すると下記の画面が表示されます。

[![画像の説明をここに入力](https://i.stack.imgur.com/XwAlQ.png)](https://i.stack.imgur.com/XwAlQ.png)

表示された画面の特徴として以下の3点が挙げられます。

  * `Notice: Trying to get property of non-object`と注意文が表示される
  * `fetch_json.js`で使っている`data`の`name`プロパティの`echizenya`が画面に表示されない。
  * コンソール画面には何も表示されない

2.

`fetch_json.php`で`Notice: Trying to get property of non-
object`とありますが、dataオブジェクトに対するnameプロパティは、`fetch_json.js`の1行目で定義されていると思います。

3.  
ローカル開発環境はWockerを使用しています。  
<https://wocker.dev/>

4.  
今回の質問は、「JavaScript逆引きレシピ 第2版」のP483の内容に基づいて投稿しています。

<https://www.shoeisha.co.jp/book/detail/9784798157573>

* * *

以上、ご確認のほどよろしくお願い申し上げます。


CC BY-SA 4.0
2019-03-16T09:19:38.447
53470
2019-03-19T23:11:43.397
2019-03-18T00:07:06.287
32232
32232
question
javascript php json promise
JSON形式のポストデータをコンソール画面上に表示させるためにはどうすれば良いでしょうか？


「JavaScript逆引きレシピ」でどのように説明されているか知りませんが、コードから読み取れる意図で回答いたします。

### `fetch_json.php`をブラウザで開くとエラーになるのはなぜか

このコードはブラウザで直接URLを入力して開かれることを想定してません。`get_file_contents('php://input')`してますから、`<form
action=...>`, XHR, fetch などで POST リクエストを送らないと何もデータを持ちません。

### `fetch_json.js`を実行するには

ブラウザでJavaScriptリソースのURLを直接開いてもコードは実行されません。HTMLページなどからJavaScriptリソースを読み込む必要があります。

[code]

    <!DOCTYPE html>
    <script src="fetch_json.js"></script>
    <p>コンソールを開いて見てね</p>
    
[/code]

この内容で`fetch_json.js` と同じディレクトリにHTMLファイルを置き、そのURLをブラウザから開きます。

もしくは、Node.js などブラウザ以外の環境で`fetch_json.js`を実行する想定なのかもしれません。


CC BY-SA 4.0
2019-03-19T23:11:43.397
53561
2019-03-19T23:11:43.397
3475
53470
answer