PHPからJavaScriptに変数とデータを渡すにはどうすればよいですか?


663

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>

2
閉じ括弧の欠落はmyPlugin.start(<?=$val?>意図的なものでしたか?「これは時々うまくいく」というのは本当ですか?
アンドリュー、

2
さて、この1はベンによって実際にだったが、ちょうど$ valがある場合としましょう"42)"、それがうまく動作します:D
マダラの幽霊

回答:


878

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

順不同:

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

この投稿では、上記の各メソッドを調べ、それぞれの長所と短所、およびそれらの実装方法を確認します。

1. AJAXを使用して、サーバーから必要なデータを取得します

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

長所

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

短所

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

実装例

AJAXでは2つのページが必要です。1つはPHPが出力を生成する場所で、もう1つは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はまだ比較的分離されています。

長所

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

短所

  • 意味のない可能性のあるマークアップ -通常、<input type=hidden>情報を格納するために何らかの方法を使用して情報を取得する方が簡単inputNode.valueですが、HTMLに無意味な要素があることを意味します。HTMLには<meta>ドキュメントに関するデータの要素があり、HTML 5ではdata-*、特定の要素に関連付けることができるJavaScriptで読み取るためのデータの属性が導入されています。
  • ソースを汚す-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にエコーする

これはおそらく理解するのが最も簡単です。

長所

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

短所

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

実装例

実装は比較的簡単です。

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

幸運を!


70
「PHPには簡単なJavaScriptエスケープ関数はありません」—何が問題になっていjson_encodeますか?
クエンティン

34
「非常に不安です!!」に同意しません そして「構造化データは難しい」。データをJSONとしてエンコードします(結局のところJavaScript Object Notation)。
el.pescado 2014年

14
AJAXリクエストを作成する際に発生する重大なオーバーヘッドとコードの複雑さの非同期についてはどうですか?JavaScript light Webサイトで作業する場合-AJAXリクエストを作成するのは面倒であり、ベストプラクティスではありません。
Benjamin Gruenbaum 2014年

8
@BenjaminGruenbaum — JSが無効なJSONであることは無関係です。割り当ての右側のJavaScriptで無効なJSONは考えられません。
クエンティン2014年

7
@SecondRikudo方法3では、この例はWebサイトを強制終了する可能性があります。例:<?php $output = '<!--<script>'; echo json_encode($output); ?>。詳細については、この質問を参照してください。解決策:を使用JSON_HEX_TAGしてエスケープ<します>(PHP 5.3.0が必要です)。
2014年

90

より簡単な答えを試してみましょう:

問題の説明

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

  • 最初にPHPが実行され、クライアントに提供されるHTMLが生成されます。
  • 次に、HTMLがクライアントに配信され、PHPがそれを使用した後、コードがサーバーを離れると、PHPが使用され、PHPにアクセスできなくなることを強調しておきます。
  • 次に、JavaScriptを使用したHTMLがクライアントに到達し、クライアントはそのHTMLでJavaScriptを実行できます。

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

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

ソリューション

それはあなたがあなた自身に尋ねるべき核心的な質問です:

私はウェブサイトまたはアプリケーションを書いていますか?

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

ウェブサイト

最初の要求が行われた後、クライアントからより多くの要求を送信すると、かなりのオーバーヘッドを伴うより多くの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.

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

ここに短い手巻きのパーサーがありますが、これの真上にリンクした答えはよりよくテストされたものです:

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.

Cookieは小さなデータに適しています。これは、追跡サービスがよく行うことです。

さらにデータを取得したら、代わりにJavaScript変数内のJSONでデータをエンコードできます。

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

仮定$valueされたjson_encodePHP側でできる(それは通常です)。この手法は、たとえばStack Overflowがチャットで行うものです(PHPの代わりに.NETのみを使用)。

応用

アプリケーションを作成している場合-突然の初期ロード時間は、アプリケーションの継続的なパフォーマンスほど常に重要ではなく、データとコードを別々にロードすることで成果を上げ始めます。

ここでの私の答えは、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は、データを取得してそれを処理するコードを含むルート/ファイルを含める必要があります。

<$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の記事この記事、およびこの質問をお読みください。


4
@cHaoより一般的に-エンコーディングは文字のシーケンスとして定義され、概念的なオブジェクトの存在は哲学的なものです。ただし、JSONオブジェクトなどがあり、それらはJSON文法によって定義されます。{}は有効なJSONオブジェクトです-json.orgを
Benjamin

1
ただし、その定義を使用している場合、すべての「JSONオブジェクト」はJSで有効です。
cHao 2014年

1
@cHaoは微妙な点に注意してください。JavaScriptにはオブジェクトの概念があり、JSONにはオブジェクトの概念があります -それらは同じではありません。「JSONオブジェクト」という用語を誤用する場合、JavaScriptランドではJSONがデータのシリアル化形式として使用され、JSONオブジェクトは文字列(サーバー側言語のSQLクエリのようなもの)内に表示されます。ただし、この回答では、JSONメソッドはほとんどの JSONオブジェクトも有効なJavaScriptオブジェクトであるため、JSONオブジェクトをJavaScriptコードに書き込みます。
Benjamin Gruenbaum

1
@cHaoああ、私は昨日、この瞬間を予見してきました:) stackoverflow.com/questions/23752156/...
ベンジャミンGruenbaum

2
OK、あなたは私をそこに連れて行った。:)しかし、それはまだ安全です。PHPのデフォルトの動作は、そのような文字を(他の非ASCII文字と一緒に)エスケープすることです。そのため、他の場合を除いて、それらは決して出力に進入\u2028しません。そうしないように明示的に指示する必要があります。
cHao 2014年

85

通常、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をご覧ください。


4
私は同意します。単純な問題に対して過度に分析して実装することを望まないのです。このメソッドはPHPをJavaScriptから分離するため、PHPは依然としてHTMLのみを生成しますが、JavaScriptはPHPファイルの外部に置くことができます。
2014

2
これが最良の選択肢であることに同意します。待ち時間なしですべてのセキュリティ問題を解決します。JSをHTMLページから完全に除外できます。HTMLはアプリケーションサーバーから提供する必要がありますが、JS(およびCSS)は提供しません。また、よりセマンティックです。
ライアン

1
@Quentin出力がHTML自体でない限り、すべての出力をエスケープする必要があります。
yuikonnu 2015年

2
@asdasd —ええ、そうです、私は一般的なケースではなく、回答のコードに関する特定の問題に対処していました。
クエンティン

1
@漢字–ベストプラクティスはありません。div大丈夫ですが、好きなタグを使うことができます。bodyしかし、中になければなりません。
Timm、

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

json_encode()には以下が必要です。

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

19

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

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

または

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

4
これは既存の回答にどのような価値をもたらしますか?
Benjamin Gruenbaum 2015

5
シンプルかつストレートに保つ。深い説明を掘り下げる時間のあるすべてのユーザー向け
Nishant Mendiratta

1
シンプルな方が良い
Doberon 2017年

これはばかげた質問かもしれませんが、私はPHPの世界にまったく新しいです。上記のコードを.phpファイルに書き込んだら、JavaScriptファイルまたは「index.html」ファイルの「js_variable」にどのようにアクセスしますか?
Ankit Prajapati

@AnkitPrajapatiドキュメントの準備状態を確認してアクセスしてみてください。次のスクリプトを使用します。 document.onreadystatechange = () => { if (document.readyState === 'complete') { // document ready alert(js_variable) } };
Nishant Mendiratta

11

WordPressのエンキュー機能とローカライズ機能の動作がとても気に入っているので、そのモデルに従って、スクリプトの依存関係に従ってスクリプトをページに配置し、スクリプトで追加のデータを利用できるようにする簡単なクラスを作成しました。

class mHeader {

    private $scripts = array();

    /**
     * @param string $id        Unique script identifier
     * @param string $src      Script src attribute
     * @param array  $deps       An array of dependencies ( script identifiers ).
     * @param array  $data       An array, data that will be json_encoded and available to the script.
     */
    function enqueue_script($id, $src, $deps = array(), $data = array()) {
        $this->scripts[$id] = array('src' => $src, 'deps' => $deps, 'data' => $data);
    }

    private function dependencies($script) {
        if ($script['deps']) {
            return array_map(array($this, 'dependencies'), array_intersect_key($this->scripts, array_flip($script['deps'])));
        }
    }

    private function _unset($key, &$deps, &$out) {
        $out[$key] = $this->scripts[$key];
        unset($deps[$key]);
    }

    private function flattern(&$deps, &$out = array()) {

        foreach($deps as $key => $value) {
            empty($value) ? $this->_unset($key, $deps, $out) : $this->flattern( $deps[$key], $out);
        }
    }

    function print_scripts() {

        if (!$this->scripts)
            return;

        $deps = array_map(array($this, 'dependencies'), $this->scripts);
        while ($deps)
            $this->flattern($deps, $js);

        foreach($js as $key => $script) {
            $script['data'] && printf("<script> var %s = %s; </script>" . PHP_EOL, key($script['data']), json_encode(current( $script['data'])));
            echo "<script id=\"$key-js\" src=\"$script[src]\" type=\"text/javascript\"></script>" . PHP_EOL;
        }
    }
}

enqueue_script()関数の呼び出しは、スクリプトの追加、他のスクリプトのソースと依存関係の設定、およびスクリプトに必要な追加データ用です。

$header = new mHeader();

$header->enqueue_script('jquery-ui', '//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js', array('jquery'));
$header->enqueue_script('jquery', '//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js');
$header->enqueue_script('custom-script', '//custom-script.min.js', array('jquery-ui'), array('mydata' => array('value' => 20)));

$header->print_scripts();

そして、print_scripts()上記の例のメソッドはこの出力を送信します:

<script id="jquery-js" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
<script id="jquery-ui-js" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js" type="text/javascript"></script>
<script> var mydata = {"value":20}; </script>
<script id="custom-script-js" src="//custom-script.min.js" type="text/javascript"></script>

スクリプト「jquery」が「jquery-ui」の後にエンキューされるという事実に関係なく、それは「jquery」に依存する「jquery-ui」で定義されているため、前に出力されます。「カスタムスクリプト」の追加データは、新しいスクリプトブロック内にあり、その前に配置されmydataます。これには、追加データを保持するオブジェクトが含まれ、「カスタムスクリプト」で使用できるようになりました。


10

これを試して:

<?php
    echo "<script> var x = " . json_encode($phpVariable) . "</script>";
?>

-

-しばらく試した後

動作しますが、パフォーマンスが低下します。PHPはサーバーサイドスクリプトであり、JavaScriptはユーザーサイドです。


4
いくつかの説明とコンテキストを提供する長い回答を探しています。一行だけ答えるのではなく、なぜあなたの答えが正しいのか、理想的には引用を使って説明してください。説明を含まない回答は削除される場合があります。これは質問に書かれています。
マダラのゴースト

3
phpコードにエコーされる<script tag>にphp変数を書き留めて説明することは何もありません
Yosra Nagati

5
本気ですか?この質問の一番上の答えを見ましたか?それはかなり説明します。ソリューションが安全でないことは言うまでもありません。 $phpVariable = '42"; alert("I am evil!");';
マダラのゴースト14

9
これは私の問題を解決し、私の提案で、私はいくつかのいずれかが、それが面白い見つけるの希望で、追加ので、私は以前の回答でそれを見つけることができません
Yosra Nagati

1
このphpコードが含まれているWebページに印刷するためにここにエコーが追加されていますか、それともデータをjs変数に入れる構文の一部にすぎません。@ YosraNagati
SUMIT KUMAR SINGH

8
myPlugin.start($val); // Tried this, didn't work

$valJavaScriptに関する限り未定義であるため、動作しません。つまり、PHPコードはに対して何も出力しませんでした$val。ブラウザでソースを表示してみてください。これが表示されます。

myPlugin.start(); // I tried this, and it didn't work

そして

<?php myPlugin.start($val); ?> // This didn't work either

これは機能しません。PHPはmyPlugin定数として処理しようとし、失敗すると文字列として処理しようとします。'myPlugin'これは、PHP関数の出力と連結しようとしますが、start()定義されていないため、致命的エラーが発生します。エラー。

そして

 myPlugin.start(<?=$val?> // This works sometimes, but sometimes it fails

PHPコードは期待される引数を使用して有効なJavaScriptを生成しているため、これが機能する可能性が最も高いですが、失敗した場合、myPluginまだ準備ができていない可能性があります。実行順序を確認してください。

また、PHPコードの出力は安全ではなく、でフィルタリングする必要があることに注意してくださいjson_encode()

編集

myPlugin.start(<?=$val?>:-\に括弧がないことに気付かなかったので

@Second Rikudoが指摘するように、それが正しく機能$valするには、次のように閉じ括弧を含める必要があります。$val="42);"

これは、PHPがmyPlugin.start(42);JavaScriptコードで実行されたときに生成され、期待どおりに機能することを意味します。


JSONはデータをエンコード:myPlugin.start(<?=json_encode($val)?>);
kingprawn

6

PHPを使用してJavaScript変数を割り当てる簡単な方法が出てきました。

HTML5データ属性を使用してPHP変数を格納し、ページの読み込み時にJavaScriptに割り当てられます。

完全なチュートリアルはここにあります

例:

<?php
    $variable_1 = "QNimate";
    $variable_2 = "QScutter";
?>
    <span id="storage" data-variable-one="<?php echo $variable_1; ?>" data-variable-two="<?php echo $variable_2; ?>"></span>
<?php

これがJavaScriptコードです

var variable_1 = undefined;
var variable_2 = undefined;

window.onload = function(){
    variable_1 = document.getElementById("storage").getAttribute("data-variable-one");
    variable_2 = document.getElementById("storage").getAttribute("data-variable-two");
}

2
データ属性は問題に対する妥当な解決策ですが、データをエスケープしないと、元の質問と同様の問題が発生します。JSの代わりにHTMLでエスケープする必要があるだけです。
クエンティン

5
  1. データをJSONに変換する
  2. AJAXを呼び出してJSONファイルを受信する
  3. JSONJavaScriptオブジェクトに変換する

例:

ステップ1

<?php

   $servername = "localhost";
   $username = "";
   $password = "";
   $dbname = "";
   $conn = new mysqli($servername, $username, $password, $dbname);

   if ($conn->connect_error) {
      die("Connection failed: " . $conn->connect_error);
   } 

   $sql = "SELECT id, name, image FROM phone";
   $result = $conn->query($sql);

   while($row = $result->fetch_assoc()){ 
      $v[] = $row;    
   }

  echo json_encode($v);

  $conn->close();
?>

ステップ2

function showUser(fnc) {
   var xhttp = new XMLHttpRequest();

   xhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
         // STEP 3    
         var p = JSON.parse(this.responseText);
      }
   }
}

5

こちらはオプションとして掲載されていないものです。Ajaxを使用するのと似ていますが、明らかに異なります。

まず、スクリプトのソースを直接PHPファイルに設定します。

<script type="text/javascript" src="url_to_your_php_file.php" /></script>

次の例のように、変数をPHPファイルに戻すこともできます。

<script type="text/javascript" src="url_to_your_php_file.php?var1=value1" /></script>

次に、「your_php_file.php」で:

<?php
    // THIS IS A SIMPLE EXAMPLE
    // it demonstrates one method of using the src attribute to link
    // to a PHP file which can generate JavaScript code dynamically
    // and share data between PHP and JavaScript
    // you may take this learning example and develop it further
    // relying on your own coding skills for validating data
    // and avoiding errors, of course
    header('content-type: text/javascript');

    // If you pass a $_GET variable from the JavaScript
    // you should add code to validate your $_GET variable(s)

    // You can add code to query a database
    // using $_GET['var1'] or some other criteria

    // You can add simple variable assignments
    $value = 'some value';

    // For the OP's needs (assumes the class object has been defined)
    $val = $myService->getValue();
?>

function name() {
    // Pay attention because you need to use quotes properly
    // and account for possible quotes in the variable strings
    // to avoid both PHP and JavaScript errors
    // example assumes $val has been returned as a string
    // validate $val as needed using your method of choice
    var example1 = <?php echo '"' . $val . '"'; ?>;
    var example2 = <?php echo '"' . $value . '"'; ?>;
    var example3 = <?php echo '"some other data"'; ?>;
    alert( example1 + ' / ' + example2 );
}

<?php
    // You may even want to include additional files (.php or .js, etc.)
    @include 'local_path_to_some_other_js_file.js';
    @include 'local_path_to_some_other_php_file.php';

    exit;
?>

変数はHTMLを生成しているPHPスクリプトに存在するため、動的にを生成する重要なステップを逃しました var1=value1。現状では、データに'文字が含まれていると、スクリプトが壊れます。
クエンティン

@QuentinコードEXAMPLEは、示されているようにエラーなしで動作します。使い方を説明するためのものです。プログラマーがここまでコーディングに慣れている場合、$ _ GET変数での単一引用符/二重引用符の意味を理解できます。これはとにかくURLエンコードする必要があります。var1 != [some HTML code]... CLEARLY var1=="value1"。はっきり言って、私が何かを逃したのは間違いです。EXAMPLEスクリプトは完全であり、ご覧のとおり、HTMLはまったく生成されていません。OPはHTMLについて言及していません。それはいくつかのトリガーハッピーバイパスャーによる反対投票に値しません
反対投票を

問題のコードは、OPが引用/エスケープを理解していないことを示しています。それについての理解の欠如が全体の問題です!この例は完全ですが、質問で示された問題を解決する方法の例ではありません。
クエンティン

@クエンティンは、OPが引用/エスケープを理解していないことをどのように正確に示していますか?OPがPHPデータをJavaScriptに取得する方法を尋ねたため、これは問題を解決する方法の例です-私の例は、他の回答で言及されていない方法の1つです
aequalsb

エスケープまたはエンコードに何もしないコードのこの部分では$val時には動作し、としません:myPlugin.start(<?=$val?> // this works sometimes, but sometimes it fails
クエンティン・

3

ここにトリックがあります:

  1. 以下は、その変数を使用するための「PHP」です。

    <?php
        $name = 'PHP variable';
        echo '<script>';
        echo 'var name = ' . json_encode($name) . ';';
        echo '</script>';
    ?>
  2. これで、というJavaScript変数'name'ができました。その変数を使用するJavaScriptコードは次のとおりです。

    <script>
         console.log("I am everywhere " + name);
    </script>

それを実際にソースコードに出力しないようにする方法はありますか?私が渡そうとしている大量の配列があり、ソースが詰まっています。
ウィリアムハウリー

1
テストケースの例を提供できますか?
Ramin Taghizada 2017

これは、この回答の「3.データを直接JavaScriptにエコーする」と同じではありませんか?それはさらに良く見えます。
漢字

3

変数が常に整数であるとしましょう。その場合、これは簡単です:

<?PHP
    $number = 4;

    echo '<script>';
    echo 'var number = ' . $number . ';';
    echo 'alert(number);';
    echo '</script>';
?>

出力

<script>var number = 4;alert(number);</script>

変数が整数ではないとしますが、上記の方法を試すと、次のような結果が得られます。

<script>var number = abcd;alert(number);</script>

しかし、JavaScriptでは、これは構文エラーです。

PHPには、json_encode文字列をJSONオブジェクトにエンコードする関数呼び出しがあります。

<?PHP
    $number = 'abcd';

    echo '<script>';
    echo 'var number = ' . json_encode($number) . ';';
    echo 'alert(number);';
    echo '</script>';
?>

以来abcdJSONであり"abcd"、それは次のようになります。

<script>var number = "abcd";alert(number);</script>

同じ方法を配列に使用できます。

<?PHP
    $details = [
    'name' => 'supun',
    'age' => 456,
    'weight' => '55'
    ];

    echo '<script>';
    echo 'var details = ' . json_encode($details) . ';';
    echo 'alert(details);';
    echo 'console.log(details);';
    echo '</script>';
?>

そして、JavaScriptコードは次のようになります。

<script>var details = {"name":"supun","age":456,"weight":"55"};alert(details);console.log(details);</script>

コンソール出力

ここに画像の説明を入力してください


2

多くの調査の結果、最も簡単な方法は、あらゆる種類の変数を簡単に渡すことです。

サーバースクリプトには2つの変数があり、それらをクライアントスクリプトに送信しようとしています。

$php_var1 ="Hello world";
$php_var2 ="Helloow";
echo '<script>';
echo 'var js_variable1= ' . json_encode($php_var1) . ';';
echo 'var js_variable2= ' . json_encode($php_var2) . ';';
echo '</script>';

ページで呼び出されるJavaScriptコードのいずれかで、これらの変数を呼び出すだけです。


1

送信するデータは文字列であると仮定します。

他のコメンターが述べたように、AJAXは可能な解決策の1つですが、短所は長所を上回ります:レイテンシがあり、プログラミングが困難です(サーバー側とクライアント側の両方の値を取得するコードが必要です)。エスケープ機能で十分です。

それで、エスケープに戻ります。json_encode($string)働くならば、あなたはそれがまだない場合にはUTF-8として最初に元の文字列をエンコードするので、json_encodeUTF-8のデータを必要とします。文字列がISO-8859-1にある場合は、単にjson_encode(utf8_encode($string)); それ以外の場合は、常にiconv最初に変換を行うために使用できます。

しかし、大きな落とし穴があります。イベントで使用している場合は、htmlspecialchars()正しいコードにするために結果を実行する必要があります。そして、イベントを囲むために二重引用符を使用するように注意するか、常にENT_QUOTEShtmlspecialcharsに追加する必要があります。例えば:

<?php
    $myvar = "I'm in \"UTF-8\" encoding and I have <script>script tags</script> & ampersand!";
    // Fails:
    //echo '<body onload="alert(', json_encode($myvar), ');">';
    // Fails:
    //echo "<body onload='alert(", json_encode($myvar), ");'>";
    // Fails:
    //echo "<body onload='alert(", htmlspecialchars(json_encode($myvar)), ");'>";

    // Works:
    //echo "<body onload='alert(", htmlspecialchars(json_encode($myvar), ENT_QUOTES), ");'>";
    // Works:
    echo '<body onload="alert(', htmlspecialchars(json_encode($myvar)), ');">';

    echo "</body>";

ただし、htmlspecialchars通常のJavaScriptコード(<script>... </script>タグで囲まれたコード)では使用できません。これは、htmlspecialcharsイベントコードを書き込むときに結果を忘れることによって、間違いを起こしやすいこの関数を利用します。

イベントを常に一重引用符で囲むか、常に二重引用符で囲む限り、その問題がなく、イベントと通常のJavaScriptコードの両方で使用できる関数を作成できます。ここに私の提案ですが、それらを二重引用符で囲む必要があります(私が好む):

<?php
    // Optionally pass the encoding of the source string, if not UTF-8
    function escapeJSString($string, $encoding = 'UTF-8')
    {
        if ($encoding != 'UTF-8')
            $string = iconv($encoding, 'UTF-8', $string);
        $flags = JSON_HEX_TAG|JSON_HEX_AMP|JSON_HEX_APOS|JSON_HEX_QUOT|JSON_UNESCAPED_SLASHES;
        $string = substr(json_encode($string, $flags), 1, -1);
        return "'$string'";
    }

この関数にはPHP 5.4以降が必要です。使用例:

<?php
    $myvar = "I'm in \"UTF-8\" encoding and I have <script>script tags</script> & ampersand!";
    // Note use of double quotes to enclose the event definition!
    echo '<body onload="alert(', escapeJSString($myvar), ');">';
    // Example with regular code:
    echo '<script>alert(', escapeJSString($myvar), ');</script>';
    echo '</body>';

0

あなたのコードに従って

<$php
     $val = $myService->getValue(); // Makes an API and database call
     echo '<span id="value">'.$val.'</span>';
$>

これで、DOMを使用して値を取得したり、スパンIDのinnerHTMLを使用したりできます。この場合、サーバーやAjaxなどの呼び出しを行う必要はありません。

ページはPHPを使用して印刷し、JavaScriptはDOMを使用して値を取得します。


このコードは、<およびなどの文字をエスケープしないため、XSSに対して脆弱>です。また、同様のソリューションがすでに提案されています。
のMichałPerłakowski

0
<?php

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

    echo "
        <script>
            myPlugin.start({$val});
        </script> ";

?>

0

PHP

$fruits = array("apple" => "yellow", "strawberry" => "red", "kiwi" => "green");
<script>
    var color = <?php echo json_encode($fruits) ?>;
</script>
<script src="../yourexternal.js"></script>

JS (yourexternal.js)

alert("The apple color is" + color['apple'] + ", the strawberry color is " + color['strawberry'] + " and the kiwi color is " + color['kiwi'] + ".");

出力

リンゴの色は黄色、イチゴの色は赤、キウイの色は緑です。


-2

以下のコードの使用に問題があり、表示され続ける<?php echo $username?>か、またはこのようなものがある場合は、無効化されている可能性があるため、この「AddType application / x-httpd-php .html .htm」を追加して、mime_moduleセクションのhttpd.confを編集してくださいデフォルトでは。

<?php
    $username = 1;
?>

<script type="text/javascript">
    var myData = <?php echo $username ?>;
    console.log(myData);
    alert(myData);
</script>

@MadaraUchiha理由を説明できますか?
Nikita

3
もしそうなら$username === "hello"、あなたはvar myData = hello;ひどく壊れるでしょう。
マダラのゴースト

-2

使用する:

<?php
    $your_php_variable= 22;
    echo "<script type='text/javascript'>var your_javascript_variable = $your_php_variable;</script>";
?>

そしてそれはうまくいくでしょう。JavaScript変数を割り当てて、既存のPHP変数の値を渡すだけです。PHPはJavaScript行をここに書き込むため、PHP変数の値を持ち、直接渡すことができます。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.