PHPからJavaScriptに変数やデータを渡す方法

javascript php


PHPに変数を持っていますが、その値がJavaScriptのコードに必要です。どのようにしてPHPからJavaScriptに変数を取得することができますか?

こんな感じのコードを持っています。

<?php
     ...
     $val = $myService->getValue(); // Makes an API and database call
?>

val を必要とし、次の行に沿って見えるJavaScriptコードがあります。

<script>
    myPlugin.start($val); // I tried this, but it didn't work
    <?php myPlugin.start($val); ?> // This didn't work either
    myPlugin.start(<?=$val?> // This works sometimes, but sometimes it fails
</script>




Answer 1 Madara's Ghost


これを行うには、実際にはいくつかのアプローチがあります。他のものよりも多くのオーバーヘッドを必要とするものもあれば、他のものよりも優れているとされるものもあります。

順不同です。

  1. サーバーから必要なデータを取得するためにAJAXを使用します。
  2. データをどこかのページにエコーして、JavaScriptを使ってDOMから情報を取得します。
  3. データを直接JavaScriptにエコーします。

今回の記事では、上記のそれぞれの方法について、それぞれの長所と短所、実装方法を見ていきます。

1.サーバーから必要なデータを取得するためにAJAXを使用する

サーバー側とクライアント側のスクリプトが完全に分かれているため、この方法が最適と考えられています

Pros

  • レイヤー間の分離の改善 -明日、PHPの使用を中止し、サーブレット、REST API、またはその他のサービスに移行する場合、JavaScriptコードの多くを変更する必要はありません。
  • より読みやすい -JavaScriptはJavaScript、PHPはPHPです。 2つを混合しないと、両方の言語でより読みやすいコードが得られます。
  • 非同期データ転送が可能-PHPから情報を取得すると、時間/リソースが高くなる可能性があります。 場合によっては、情報を待ち、ページをロードし、いつでも情報に到達したくないことがあります。
  • マークアップでデータが直接検出されない -これは、マークアップが追加データを含まないように保たれ、JavaScriptのみがそれを認識できることを意味します。

Cons

  • レイテンシ -AJAXはHTTPリクエストを作成し、HTTPリクエストはネットワーク経由で伝送され、ネットワークレイテンシがあります。
  • 状態 -別のHTTPリクエストを介してフェッチされたデータには、HTMLドキュメントをフェッチしたHTTPリクエストからの情報は含まれません。 この情報が必要になる場合があります(たとえば、フォームの送信に応答してHTMLドキュメントが生成される場合)。必要な場合は、何らかの方法で転送する必要があります。 ページにデータを埋め込むことを除外した場合(この手法を使用している場合にそうなります)、それにより、競合状態の影響を受ける可能性のあるCookie /セッションに制限されます。

実装例

AJAXでは、2つのページが必要です。1つはPHPが出力を生成するところで、2つ目はJavaScriptがその出力を取得するところです。

get-data.php

/* Do some operation here, like talk to the database, the file-session
 * The world beyond, limbo, the city of shimmers, and Canada.
 *
 * AJAX generally uses strings, but you can output JSON, HTML and XML as well.
 * It all depends on the Content-type header that you send with your AJAX
 * request. */

echo json_encode(42); // In the end, you need to echo the result.
                      // All data should be json_encode()d.

                      // You can json_encode() any value in PHP, arrays, strings,
                      //even objects.

index.php (または実際のページの名前)

<!-- snip -->
<script>
    function reqListener () {
      console.log(this.responseText);
    }

    var oReq = new XMLHttpRequest(); // New request object
    oReq.onload = function() {
        // This is where you handle what to do with the response.
        // The actual data is found on this.responseText
        alert(this.responseText); // Will alert: 42
    };
    oReq.open("get", "get-data.php", true);
    //                               ^ Don't block the rest of the execution.
    //                                 Don't wait until the request finishes to
    //                                 continue.
    oReq.send();
</script>
<!-- snip -->

上記の2つのファイルの組み合わせは、ファイルのロードが完了すると 42 に警告します。

その他の読み物をいくつか紹介します。

2.データをどこかのページにエコーして、JavaScriptを使ってDOMから情報を取得する

この方法は、AJAXよりも望ましい方法ではありませんが、依然として利点があります。 JavaScriptには直接PHPが存在しないという意味で、PHPとJavaScriptはまだ比較的分離されています。

Pros

  • 高速 -多くの場合、DOM操作は高速であり、多くのデータを比較的迅速に格納してアクセスできます。

Cons

  • 意味のない可能性のあるマークアップ -通常、情報を格納するために何らかの <input type=hidden> を使用しますが、 inputNode.value から情報を取得する方が簡単ですが、そうすると意味のない要素が含まれますあなたのHTML。 HTMLには、ドキュメントに関するデータの <meta> 要素があり、HTML 5では、特定の要素に関連付けることができるJavaScriptでの読み取り専用の data-* 属性が導入されています。
  • ソースを汚す-PHPが生成するデータは、直接HTMLソースに出力されます。つまり、より大きく焦点が絞られていないHTMLソースを取得します。
  • 構造化データを取得するのが難しい -構造化データは有効なHTMLである必要があります。そうでなければ、文字列をエスケープして変換する必要があります。
  • PHPをデータロジックに緊密に結合-PHPはプレゼンテーションで使用されるため、2つを完全に分離することはできません。

実装例

これを使えば、ユーザーには表示されないが、JavaScriptからは見えるような何らかの要素を作ることができます。

index.php

<!-- snip -->
<div id="dom-target" style="display: none;">
    <?php
        $output = "42"; // Again, do some operation, get the output.
        echo htmlspecialchars($output); /* You have to escape because the result
                                           will not be valid HTML otherwise. */
    ?>
</div>
<script>
    var div = document.getElementById("dom-target");
    var myData = div.textContent;
</script>
<!-- snip -->

3.データを直接JavaScriptにエコーする

これが一番わかりやすいかもしれません。

Pros

  • 非常に簡単に実装 -これを実装して理解するのに必要なことはほとんどありません。
  • ソースを汚染しない -変数はJavaScriptに直接出力されるため、DOMは影響を受けません。

Cons

  • PHPをデータロジックに緊密に結合-PHPはプレゼンテーションで使用されるため、2つを完全に分離することはできません。

実装例

実装は比較的簡単です。

<!-- snip -->
<script>
    var data = <?php echo json_encode("42", JSON_HEX_TAG); ?>; // Don't forget the extra semicolon!
</script>
<!-- snip -->

頑張れ!




Answer 2 Benjamin Gruenbaum


もっとシンプルな答えを出してみる。

問題点の説明

まず、サーバーからページが提供されたときのイベントの流れを理解してみましょう。

  • 最初にPHPが実行され、クライアントに提供されるHTMLを生成します。
  • そして、PHPがそれを処理した後、HTMLがクライアントに配信されますが、私が強調したいのは、一旦コードがサーバーを離れると-PHPはそれを処理した後、それにアクセスできなくなります。
  • そして、JavaScriptを搭載したHTMLがクライアントに届き、そのHTML上でJavaScriptを実行することができます。

したがって、ここで覚えておくべき中心的なことは、 HTTPはステートレスであることです。 リクエストがサーバーを離れると、サーバーはそれにアクセスできません。 したがって、オプションは次のとおりです。

  1. 最初の要求が完了した 、クライアントからさらに要求を送信します。
  2. サーバーが最初のリクエストで言ったことをエンコードします。

Solutions

それは、あなたが自分自身に問いかけるべき核心的な問題です。

ホームページを書くのか、アプリを書くのか?

ウェブサイトは主にページベースであり、ページロード時間は可能な限り高速である必要があります (例-Wikipedia)。ウェブアプリケーションはよりAJAXが重く、クライアントに高速な情報を提供するために多くのラウンドトリップを実行します(例えば-株式ダッシュボード)。

Website

最初の要求が行われた後、クライアントからより多くの要求を送信すると、かなりのオーバーヘッドを持つHTTP要求がさらに必要になるため、 遅くなります。 さらに、AJAXリクエストを行うには、完了時にハンドラーが必要になるため、 非同期性が必要です。

サイトがサーバーから情報を取得するためのアプリケーションない限り、別のリクエストを行うことお勧めしません

変換時間と読み込み時間に大きな影響を与える高速応答時間が必要です。 この場合、Ajaxリクエストの作成は初期のアップタイムが遅く、不要です。

問題に取り組むには、次の2つの方法があります。

  • Cookieを設定する-Cookieは、サーバーとクライアントの両方が読み取ることができるHTTPリクエストで送信されるヘッダーです。
  • 変数をJSONとしてエンコード-JSONは JavaScriptオブジェクトに非常に近く、 ほとんどの JSONオブジェクトは有効なJavaScript変数です。

Cookieの設定はそれほど難しくありません。値を割り当てるだけです。

setcookie("MyCookie", $value); // Sets the cookie to the value, remember, do not
                               // Set it with HTTP only to true.

次に、 document.cookie を使用してJavaScriptで読み取ることができ ます 。

ここに短い手巻きパーサーがありますが、右上にリンクした答えは、より良いテスト済みのものを持っています。

var cookies = document.cookie.split(";").
    map(function(el){ return el.split("="); }).
    reduce(function(prev,cur){ prev[cur[0]] = cur[1];return prev },{});

cookies["MyCookie"] // Value set with PHP.

クッキーはちょっとしたデータを取るのにいいですよね。これはトラッキングサービスがよくやっていることです。

データが増えたら、代わりにJavaScriptの変数の中のJSONでエンコードすることができます。

<script>
    var myServerData = <?=json_encode($value)?>; // Don't forget to sanitize
                                                 //server data
</script>

$value がPHP側で json_encode 可能であると想定します (通常は可能です)。 この手法は、たとえばStack Overflowがチャットで行うものです(PHPの代わりに.NETのみを使用)。

Application

アプリケーションを書いている場合-突然、最初のロード時間はアプリケーションの継続的なパフォーマンスほど重要ではなく、データとコードを別々にロードすることが有益であることがわかります。

ここでの私の答えは、JavaScriptでAJAXを使用してデータをロードする方法を説明しています。

function callback(data){
    // What do I do with the response?
}

var httpRequest = new XMLHttpRequest;
httpRequest.onreadystatechange = function(){
    if (httpRequest.readyState === 4) { // Request is done
        if (httpRequest.status === 200) { // successfully
            callback(httpRequest.responseText); // We're calling our method
        }
    }
};
httpRequest.open('GET', "/echo/json");
httpRequest.send();

もしくはjQueryで。

$.get("/your/url").done(function(data){
    // What do I do with the data?
});

ここで、サーバーには /your/url route / fileを含めるだけで済みます。このファイルには、データを取得して何かを行うコードが含まれています。

<$php
     ...
     $val = myService->getValue(); // Makes an API and database call
     echo json_encode($val); // Write it to the output
 $>

この方法では、JavaScriptファイルはコードやレイアウトを要求するのではなく、データを要求して表示します。これはよりクリーンで、アプリケーションが高機能になるにつれて効果を発揮し始めます。また、懸念事項をより明確に分離することができ、サーバーサイドの技術を介さずにクライアントサイドのコードをテストすることができ、これもプラスになります。

追記: PHPからJavaScriptに何かを注入するときは、XSS攻撃ベクトルに十分注意する必要があります。 値を適切にエスケープすることは非常に難しく、状況依存です。 XSSの扱い方がわからない場合、またはXSSを認識していない場合は、OWASPの記事この 記事 、およびこの質問をお読みください。




Answer 3 yuikonnu


私は普段、HTMLではdata-*属性を使っています。

<div class="service-container" data-service="<?php echo $myService->getValue(); ?>">

</div>

<script>
    $(document).ready(function() {
        $('.service-container').each(function() {
            var container = $(this);
            var service = container.data('service');

            // Variable "service" now contains the value of $myService->getValue();
        });
    });
</script>

この例では jQuery を使用していますが、他のライブラリやバニラ JavaScript にも対応できます。

データセットプロパティの詳細については、 https : //developer.mozilla.org/en-US/docs/Web/API/HTMLElement.datasetをご覧ください。




Answer 4 Jessé Catrinck


<script>
  var jsvar = <?php echo json_encode($PHPVar); ?>;
</script>

json_encode()が必要です。

  • PHP 5.2.0以上
  • $PHPVar 、UTF-8、Unicodeとしてエンコードされています。



Answer 5 Nishant Mendiratta


以下のいずれかの方法を使用してください。

<script type="text/javascript">
var js_variable  = '<?php echo $php_variable;?>';
<script>

OR

<script type="text/javascript">
    var js_variable = <?php echo json_encode($php_variable); ?>; 
</script>