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

682
Madara's Ghost 2014-05-20 04:37.

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>

17 answers

902
Madara's Ghost 2014-05-20 04:37.

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

順不同:

  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 -->

幸運を!

93
Benjamin Gruenbaum 2014-05-20 05:02.

もっと簡単な答えを試してみます:

問題の説明

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

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

つまり、ここで覚えておくべき重要なことは、HTTPはステートレスであるということです。リクエストがサーバーを離れると、サーバーはそれに触れることができません。だから、それは私たちのオプションを次のように残します:

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

ソリューション

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

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

ウェブサイトは主にページベースであり、ページの読み込み時間はできるだけ速くする必要があります(たとえば、ウィキペディア)。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で名前でCookieを読み取るための最短の関数は何ですか?ができJavaScriptで名前でCookieを読み取るための最短の関数は何ですか?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.

クッキーは少しのデータに適しています。これは、追跡サービスがよく行うことです。

データが増えたら、代わりに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ファイルは、コードやレイアウトを要求するのではなく、データを要求して表示します。これはよりクリーンで、アプリケーションが高くなるにつれて成果を上げ始めます。また、関心の分離が改善され、サーバー側のテクノロジを使用せずにクライアント側のコードをテストできるため、もう1つの利点があります。

追伸:あなたはする必要は非常にあなたがPHPからJavaScriptに何かを注入したときにXSSの攻撃ベクトルを意識。それはです非常に適切な値をエスケープするのは難しい、それはコンテキスト依存です。XSSの扱い方がわからない場合、またはXSSに気付いていない場合は、このOWASPの記事この記事、およびPHPサイトでxss攻撃を回避するためのベストプラクティスは何ですかをお読みください。

91
yuikonnu 2014-05-23 07:14.

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

39
Jessé Catrinck 2014-07-19 12:00.
<script>
  var jsvar = <?php echo json_encode($PHPVar); ?>;
</script>

json_encode()に必要なもの:

  • PHP5.2.0以上
  • $PHPVar UTF-8、Unicodeとしてエンコードされます。
25
Nishant Mendiratta 2015-04-14 08:59.

次のいずれかの方法を使用するだけです。

<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>
12
Danijel 2014-10-30 10:24.

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」で定義されているため、スクリプトは前に出力されます。'custom-script'の追加データは、新しいスクリプトブロック内にあり、その前に配置されmydataます。これには、追加データを保持するオブジェクトが含まれ、 'custom-script'で使用できるようになりました。

11
Yosra Nagati 2014-09-03 00:04.

これを試して:

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

-

-これをしばらく試した後

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

8
andrew 2014-05-20 05:20.
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);"

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

8
qnimate 2015-01-20 05:04.

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");
}
6
DeV 2018-07-20 02:15.
  1. データをJSONに変換する
  2. JSONファイルを受信するにはAJAXを呼び出します
  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);
      }
   }
}
6
aequalsb 2015-05-19 10:12.

これは私がオプションとして投稿されたとは思わないものです。これは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;
?>
4
Ramin Taghizada 2017-07-14 05:36.

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

  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>
    
3
Supun Praneeth 2018-07-09 04:52.

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

<?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
Max 2018-08-30 22:59.

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

サーバースクリプトには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
Pedro Gimeno 2016-06-06 07:44.

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

他のコメント提供者が述べているように、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'";
    }

この関数にはPHP5.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
Amit Shah 2015-04-16 01:14.

あなたのコードに従って

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

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

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

0
antelove 2019-08-15 06:37.
<?php

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

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

?>

Related questions

MORE COOL STUFF

「水曜日」シーズン1の中心には大きなミステリーがあります

「水曜日」シーズン1の中心には大きなミステリーがあります

Netflixの「水曜日」は、典型的な10代のドラマ以上のものであり、実際、シーズン1にはその中心に大きなミステリーがあります.

ボディーランゲージの専門家は、州訪問中にカミラ・パーカー・ボウルズが輝くことを可能にした微妙なケイト・ミドルトンの動きを指摘しています

ボディーランゲージの専門家は、州訪問中にカミラ・パーカー・ボウルズが輝くことを可能にした微妙なケイト・ミドルトンの動きを指摘しています

ケイト・ミドルトンは、州の夕食会と州の訪問中にカミラ・パーカー・ボウルズからスポットライトを奪いたくなかった、と専門家は言う.

一部のファンがハリー・スタイルズとオリビア・ワイルドの「非常に友好的な」休憩が永続的であることを望んでいる理由

一部のファンがハリー・スタイルズとオリビア・ワイルドの「非常に友好的な」休憩が永続的であることを望んでいる理由

一部のファンが、オリビア・ワイルドが彼女とハリー・スタイルズとの間の「難しい」が「非常に友好的」な分割を恒久的にすることを望んでいる理由を見つけてください.

エリザベス女王の死後、ケイト・ミドルトンはまだ「非常に困難な時期」を過ごしている、と王室の専門家が明らかにする 

エリザベス女王の死後、ケイト・ミドルトンはまだ「非常に困難な時期」を過ごしている、と王室の専門家が明らかにする&nbsp;

エリザベス女王の死後、ケイト・ミドルトンが舞台裏で「非常に困難な時期」を過ごしていたと伝えられている理由を調べてください.

セントヘレナのジェイコブのはしごを登るのは、気弱な人向けではありません

セントヘレナのジェイコブのはしごを登るのは、気弱な人向けではありません

セント ヘレナ島のジェイコブズ ラダーは 699 段の真っ直ぐ上る階段で、頂上に到達すると証明書が発行されるほどの難易度です。

The Secrets of Airline Travel Quiz

The Secrets of Airline Travel Quiz

Air travel is far more than getting from point A to point B safely. How much do you know about the million little details that go into flying on airplanes?

Where in the World Are You? Take our GeoGuesser Quiz

Where in the World Are You? Take our GeoGuesser Quiz

The world is a huge place, yet some GeoGuessr players know locations in mere seconds. Are you one of GeoGuessr's gifted elite? Take our quiz to find out!

バイオニック読書はあなたをより速く読むことができますか?

バイオニック読書はあなたをより速く読むことができますか?

BionicReadingアプリの人気が爆発的に高まっています。しかし、それは本当にあなたを速読術にすることができますか?

パンデミックは終わったかもしれないが、Covid-19 は終わっていない

パンデミックは終わったかもしれないが、Covid-19 は終わっていない

2021 年 6 月 8 日にニューヨーク市で開催された covid-19 パンデミックで亡くなった人々の命を偲び、祝うために、ネーミング ザ ロスト メモリアルズが主催するイベントと行進の最中に、グリーンウッド墓地の正門から記念碑がぶら下がっています。週末、ジョー・バイデン大統領は、covid-19 パンデミックの終息を宣言しました。これは、過去 2 年以上にわたり、公の場でそうするための長い列の中で最新のものです。

デビル・イン・オハイオの予告編は、エミリー・デシャネルもオハイオにいることを明らかにしています

デビル・イン・オハイオの予告編は、エミリー・デシャネルもオハイオにいることを明らかにしています

オハイオ州のエミリー・デシャネル みんな早く来て、ボーンズが帰ってきた!まあ、ショーボーンズではなく、彼女を演じた俳優. エミリー・デシャネルに最後に会ってからしばらく経ちました.Emily Deschanel は、長期にわたるプロシージャルな Bones の Temperance “Bones” Brennan としてよく知られています。

ドナルド・トランプはFBIのマー・ア・ラーゴ襲撃映像をリリースする予定ですか?

ドナルド・トランプはFBIのマー・ア・ラーゴ襲撃映像をリリースする予定ですか?

どうやら、ドナルド・トランプに近い人々は、今月初めにFBIによって家宅捜索された彼のMar-a-Lago財産からの映像を公開するよう彼に勧めています. 前大統領はテープを公開するかどうかを確認していませんが、息子はフォックス・ニュースにそうなるだろうと語った.

Andor は、他の Star Wars ショーから大きな距離を置きます。

Andor は、他の Star Wars ショーから大きな距離を置きます。

アンドールの一場面。数十年前、ジョージ・ルーカスがスター・ウォーズのテレビ番組を制作するのを妨げた主な理由は、お金でした。

ケイト・ミドルトンとウィリアム王子は、彼らが子供たちと行っているスパイをテーマにした活動を共有しています

ケイト・ミドルトンとウィリアム王子は、彼らが子供たちと行っているスパイをテーマにした活動を共有しています

ケイト・ミドルトンとウィリアム王子は、子供向けのパズルの本の序文を書き、ジョージ王子、シャーロット王女、ルイ王子と一緒にテキストを読むと述べた.

事故で押しつぶされたスイカは、動物を喜ばせ水分補給するために野生生物保護団体に寄付されました

事故で押しつぶされたスイカは、動物を喜ばせ水分補給するために野生生物保護団体に寄付されました

Yak's Produce は、数十個のつぶれたメロンを野生動物のリハビリ専門家であるレスリー グリーンと彼女のルイジアナ州の救助施設で暮らす 42 匹の動物に寄付しました。

デミ・ロヴァートは、新しいミュージシャンのボーイフレンドと「幸せで健康的な関係」にあります: ソース

デミ・ロヴァートは、新しいミュージシャンのボーイフレンドと「幸せで健康的な関係」にあります: ソース

8 枚目のスタジオ アルバムのリリースに向けて準備を進めているデミ ロヴァートは、「スーパー グレート ガイ」と付き合っている、と情報筋は PEOPLE に確認しています。

Plathville の Kim と Olivia Plath が数年ぶりに言葉を交わすことへようこそ

Plathville の Kim と Olivia Plath が数年ぶりに言葉を交わすことへようこそ

イーサン プラスの誕生日のお祝いは、TLC のウェルカム トゥ プラスビルのシーズン 4 のフィナーレで、戦争中の母親のキム プラスと妻のオリビア プラスを結びつけました。

仕事の生産性を高める 8 つのシンプルなホーム オフィスのセットアップのアイデア

仕事の生産性を高める 8 つのシンプルなホーム オフィスのセットアップのアイデア

ホームオフィスのセットアップ術を極めよう!AppExert の開発者は、家族全員が一緒にいる場合でも、在宅勤務の技術を習得しています。祖父や曽祖父が共同家族で暮らしていた頃の記憶がよみがえりました。

2022 年、私たちのデジタル ライフはどこで終わり、「リアル ライフ」はどこから始まるのでしょうか?

20 年前のタイムトラベラーでさえ、日常生活におけるデジタルおよびインターネットベースのサービスの重要性に驚くことでしょう。MySpace、eBay、Napster などのプラットフォームは、高速化に焦点を合わせた世界がどのようなものになるかを示してくれました。

ニューロマーケティングの秘密科学

ニューロマーケティングの秘密科学

マーケティング担当者が人間の欲望を操作するために使用する、最先端の (気味が悪いと言う人もいます) メソッドを探ります。カートをいっぱいにして 3 桁の領収書を持って店を出る前に、ほんの数点の商品を買いに行ったことはありませんか? あなたは一人じゃない。

地理情報システムの日: GIS 開発者として学ぶべき最高の技術スタック

地理情報システムの日: GIS 開発者として学ぶべき最高の技術スタック

私たちが住んでいる世界を確実に理解するには、データが必要です。ただし、空間参照がない場合、このデータは地理的コンテキストがないと役に立たなくなる可能性があります。

Language