質問: { 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); }); ``` ### 【質問の補足】 【質問の主旨】に対して下記の4点を補足説明します。 1. 現在、ローカル開発環境上で`fetch_json.php`を実行すると下記の画面が表示されます。 ![画像の説明をここに入力](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を使用しています。 4. 今回の質問は、「JavaScript逆引きレシピ 第2版」のP483の内容に基づいて投稿しています。 --- 以上、ご確認のほどよろしくお願い申し上げます。
回答: 「JavaScript逆引きレシピ」でどのように説明されているか知りませんが、コードから読み取れる意図で回答いたします。 ### `fetch_json.php`をブラウザで開くとエラーになるのはなぜか このコードはブラウザで直接URLを入力して開かれることを想定してません。`get_file_contents('php://input')`してますから、``, XHR, fetch などで POST リクエストを送らないと何もデータを持ちません。 ### `fetch_json.js`を実行するには ブラウザでJavaScriptリソースのURLを直接開いてもコードは実行されません。HTMLページなどからJavaScriptリソースを読み込む必要があります。 ``` コンソールを開いて見てね ``` この内容で`fetch_json.js` と同じディレクトリにHTMLファイルを置き、そのURLをブラウザから開きます。 もしくは、Node.js などブラウザ以外の環境で`fetch_json.js`を実行する想定なのかもしれません。