javascript - 如何将变量和数据从PHP传递到JavaScript？

Question

想改进这篇文章吗？提供这个问题的详细答案，包括引文和解释为什么你的答案是正确的。没有足够详细信息的答案可能会被编辑或删除。
我在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

实际上有几种方法可以做到这一点。有些人比其他人需要更多的开销，有些人被认为比其他人更好。
没有特别的顺序：
使用AJAX从服务器获取所需的数据。
将数据回送到页面的某个位置，并使用JavaScript从DOM获取信息。
将数据直接回显到JavaScript。
在这篇文章中，我们将研究以上每一种方法，并了解每种方法的优缺点以及如何实现它们。
一。使用AJAX从服务器获取所需的数据
这种方法被认为是最好的，因为服务器端和客户端脚本是完全分离的。
赞成的意见
更好的层间分离-如果明天停止使用PHP，并希望迁移到servlet、REST API或其他服务，则不必更改太多JavaScript代码。
更具可读性-JavaScript是JavaScript，PHP是PHP。不混合这两种语言，就可以在两种语言上获得更多的可读代码。
允许异步数据传输-从PHP获取信息可能会耗费时间/资源。有时你只是不想等待信息，加载页面，并随时获取信息。
在标记上没有直接找到数据-这意味着标记中没有任何其他数据，只有JavaScript可以看到它。
欺骗
延迟-AJAX创建一个HTTP请求，HTTP请求通过网络传输并具有网络延迟。
通过单独的HTTP请求获取的状态数据不会包含从获取HTML文档的HTTP请求获取的任何信息。您可能需要这些信息（例如，如果HTML文档是为响应表单提交而生成的），如果需要，则必须以某种方式将其传递过来。如果你已经排除了在页面中嵌入数据的可能性（如果你使用这种技术的话，你已经拥有了这些数据），那么这就限制了你使用cookies/会话，而cookies/会话可能会受到比赛条件的限制。
实现示例
使用AJAX，您需要两个页面，一个是PHP生成输出的页面，另一个是JavaScript获取输出的页面：
获取数据.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 -->

当文件完成加载时，这两个文件的上述组合将发出警报 42。
更多的阅读材料
Using XMLHttpRequest - MDN
XMLHttpRequest object reference - MDN
How do I return the response from an asynchronous call?
2。将数据回送到页面的某个位置，并使用JavaScript从DOM获取信息
这种方法不如AJAX好，但它仍然有其优点。从某种意义上说，在PHP和JavaScript之间还是相对分离的，JavaScript中没有直接的PHP。
赞成的意见
快速DOM操作通常很快，您可以相对快速地存储和访问大量数据。
欺骗
潜在的不安全标记-通常，发生的情况是您使用某种 <input type=hidden>来存储信息，因为从 inputNode.value中获取信息更容易，但这样做意味着您的HTML中有一个无意义的元素。HTML有用于文档数据的 <meta>元素，HTML 5为数据引入了 data-*属性，专门用于使用JavaScript读取可与特定元素关联的数据。
将PHP生成的源数据直接输出到HTML源代码，这意味着您得到了一个更大、更不集中的HTML源代码。
很难获得结构化数据-结构化数据必须是有效的HTML，否则您必须自己转义和转换字符串。
将PHP与数据逻辑紧密地结合在一起——因为PHP用于表示，所以不能将两者完全分离。
实现示例
这样做的目的是创建某种元素，这种元素不会显示给用户，但对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 -->

三。将数据直接回显到JavaScript
这可能是最容易理解的。
赞成的意见
很容易实现-实现它只需要很少的时间，并且理解。
不脏源变量直接输出到JavaScript，所以DOM不受影响。
欺骗
将PHP与数据逻辑紧密地结合在一起——因为PHP用于表示，所以不能将两者完全分离。
实现示例
实现相对简单：

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

祝你好运！