PHPから出力したHTMLから、javascriptにデータ(連想配列)を引き渡す方法

PHPの連想配列をJavascriptに引き渡す方法についての記事です。

Angular.jsで構築したサイトをスピードアップしたい

Angular.js を利用したサイトは、HTMLやjavascriptの読み込みが完了した後に、Ajax でデータを取得してバインドしていきますので、HTMLの読み込みから描画が完了するまでに、ワンテンポ待ち時間が発生してしまいます。

このワンテンポの待ち時間を無くす必要にかられまして、Ajaxで読み込んでいたデータを、最初からHTML(PHPから出力)の中に埋め込んでAngular.jsに引き渡すという方法にトライしてみました。

要は ng-initタグを通じてAngular.jsの関数に引数が渡るようにすれば良いわけです。

連想配列を渡すには Json にして渡せばOKだよねと思って実装したところ、エスケープがうまくいかず少々ハマりましたのでその方法をここに書き記しておきたいと思います。

PHPからJavascriptへデータを引き渡す方法

HTMLの中にjavascriptを埋め込む場合、HTMLの表示が崩れないようにエスケープしなければなりません。addslashesやhtmlentities、htmlspecialcharsなどPHPにはエスケープ用の関数がたくさんありますが、今回はこんな組み合わせで実現しました。

PHP側($bind <= 引き渡したい連想配列)

Javascript側

  1. PHP : 連想配列をJSON形式のテキストデータに変換します。
  2. PHP : JSONデータをrawurlencode関数でエンコードします。
  3. PHP : ng-init のスクリプトに埋め込みます。
  4. Javascript : 受け取ったデータをdecodeURIComponent関数でデコードします。
  5. Javascript : angular.fromJson関数で連想配列に戻します。

以上で、PHP内の配列データをAngular.jsに引き渡すことが出来ました。

スポンサーリンク
広告(大)
広告(大)

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
広告(大)