Backbone.js Model.save()によるPOSTデータをPHPで読み込む

Pocket

最近Backbone.jsを使い始めました。
JavaScriptのMVCフレームワークの内、知名度が最も高いらしいということで。

日本語の入門記事としてはこちらが非常に分かりやすく、参考にさせていただいています。
Backbone.js 入門

Model.save()のサンプル

Backbone.jsのModelを使ってデータ登録・更新を行う場合、通常はModelメソッドのsave() を使うと思いますが、save()の動作を確認する簡単なサンプルを作ってみました。
(save()を使うと、リソースAPIに対してPOST(またはPUT)リクエストが送信されます。)

Backbone.js saveサンプル

サンプルの動作

  1. 「送信」ボタンをクリックすると、入力された名前と住所をPOSTリクエストで送信する。
  2. POST送信された名前と住所のJSON文字列が、ボディに含まれてレスポンスが返ってくる。
  3. レスポンスされた名前と住所を画面に表示する。

サンプルを構成するファイル

以下、上記サンプルを動作させているファイルの一覧と、ファイルの内容です。

ファイル一覧

backbone-save-test.html
名前と住所を送信する画面
backbone_save_test.js
名前と住所の値をModelに保持して、save(POSTリクエスト)するJavaScript
backbone_save_test.php
POSTリクエスト先のPHPファイル

backbone-save-test.htmlの一部

名前と住所の入力部分と、レスポンスデータを表示するテンプレート部分です。

 

backbone_save_test.js

名前と住所の値をModelに保持して、save(POSTリクエスト)します。

 

backbone_save_test.php(修正前)

Model.save()により送信されたPOSTデータを、$_POSTから取得しようとしています。

 

$_POSTでは、application/jsonのPOSTデータを取得できない

Backbone.jsのsave()によるPOSTデータをPHPで取得する際に、少し困ったことがありました。

リクエストをPHPで受け付けた場合、$_POST($_REQUEST)などのスーパーグローバルを使ってリクエストデータを取得すると思いますが、$_POSTにはリクエストデータが入っていないのです。

Backbone.jsはPOSTリクエストボディにJSON文字列をそのまま入れて送信するため、
$_POSTが想定している形式と違うということのようです。

Backbone.jsとPHPが扱うContent-Typeの違い

Backbone.js のPOSTリクエスト
Content-Type: application/json
PHPが想定しているPOSTリクエスト
Content-Type: application/x-www-form-urlencoded

 

PHPでBackbone.jsのPOSTデータを取得する方法

方法は二つあります。

  • “php://input”からリクエストボディを直接読み込む
  • Backbone.emulateJSON = true に設定する

 

php:// — さまざまな入出力ストリームへのアクセス

php://input は読み込み専用のストリームで、 リクエストの body 部から生のデータを読み込むことができます。 POST リクエストの場合は $HTTP_RAW_POST_DATA よりも php://input を使うのが望ましいでしょう。php.ini ディレクティブの設定に依存しないからです。 さらに、$HTTP_RAW_POST_DATA がデフォルトで設定されない場合は、 always_populate_raw_post_data を有効にするよりも $HTTP_RAW_POST_DATA を使うほうがメモリの消費量が少なくなるでしょう。 php://input は、 enctype=”multipart/form-data” に対しては使用できません。

 

emulateJSON 

If you’re working with a legacy web server that can’t handle requests encoded asapplication/json, setting Backbone.emulateJSON = true; will cause the JSON to be serialized under a model parameter, and the request to be made with aapplication/x-www-form-urlencoded mime type, as if from an HTML form.

 

上記の通り、Backbone.emulateJSONをtrueに設定する方法だと、Content-Type:application/x-www-form-urlencoded でPOSTリクエストが送信されるようになりますが、

今回は”php://input”を使う方法で対応します。

emulateJSONの説明文中の”a legacy web server”の部分が気に入らないというのもあって(レガシーとかじゃないだろとw)

 

backbone_save_test.php(修正後)

backbone_save_test.phpの内容を、以下のように修正します。

 

修正後のサンプル

修正後のサンプルが、冒頭にも紹介したこちらです。(冒頭と同じ内容です)
Backbone.js saveサンプル

 

6 Thoughts on “Backbone.js Model.save()によるPOSTデータをPHPで読み込む

  1. Pingback: Backbone.js Collection.fetch() による一覧画面の描画 | 開発メモるアル

  2. Pingback: 20140315のまとめ | Unresolved

  3. Pingback: Backbone.jsでAPIに渡すときのメモ。 | devLog

  4. Pingback: FuelPHPのRestコントローラでBackbone.jsからPOSTのデータを受け取る方法 | Bamboo lath 日々の記録

  5. Pingback: Backbone.js ModelのSave - Logicky Blog

  6. Pingback: Backbone.jsのsaveでPOSTした値をPHPの$_POSTで取得できない… | OnederAppli

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Post Navigation