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

实际上有几种方法可以做到这一点。有些需要比其他更多的开销，有些被认为比其他更好。

没有特别的顺序：

使用 AJAX 从服务器获取您需要的数据。将数据回显到页面的某处，并使用 JavaScript 从 DOM 获取信息。将数据直接回显到 JavaScript。

在这篇文章中，我们将检查上述每种方法，并了解每种方法的优缺点，以及如何实现它们。

1.使用AJAX从服务器获取你需要的数据

这种方法被认为是最好的，因为您的服务器端和客户端脚本是完全分开的。

优点

更好的层间分离——如果明天您停止使用 PHP，并希望转向 servlet、REST API 或其他一些服务，您不必更改很多 JavaScript 代码。

更具可读性 - JavaScript 是 JavaScript，PHP 是 PHP。如果不将两者混合，您将获得两种语言的可读性更高的代码。

允许异步数据传输 - 从 PHP 获取信息可能会耗费时间/资源。有时您只是不想等待信息、加载页面并随时获取信息。

数据不是直接在标记上找到的——这意味着你的标记没有任何额外的数据，只有 JavaScript 可以看到它。

缺点

延迟 - AJAX 创建一个 HTTP 请求，并且 HTTP 请求通过网络承载并具有网络延迟。

状态 - 通过单独的 HTTP 请求获取的数据不会包含来自获取 HTML 文档的 HTTP 请求的任何信息。您可能需要此信息（例如，如果 HTML 文档是为响应表单提交而生成的），并且如果您需要，则必须以某种方式传输它。如果您已排除在页面中嵌入数据（如果您使用此技术，您有），那么这将限制您使用可能受竞争条件影响的 cookie/会话。

实现示例

使用 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。

更多阅读材料

使用 XMLHttpRequest - MDN

XMLHttpRequest 对象参考 - MDN

如何从异步调用返回响应？

2. 将数据回显到页面某处，并使用 JavaScript 从 DOM 获取信息

这种方法不如 AJAX 可取，但它仍然有其优点。从某种意义上说，PHP 和 JavaScript 之间仍然相对分离，因为 JavaScript 中没有直接的 PHP。

优点

快速 - DOM 操作通常很快，您可以相对快速地存储和访问大量数据。

缺点

潜在的无语义标记 - 通常情况下，您使用某种 来存储信息，因为从 inputNode.value 中获取信息更容易，但这样做意味着您在其中有一个无意义的元素你的 HTML。 HTML 具有用于文档数据的 元素，HTML 5 引入了 data-* 数据属性，专门用于使用可与特定元素关联的 JavaScript 读取的数据。

弄脏源 - PHP 生成的数据直接输出到 HTML 源，这意味着您获得了更大且不那么集中的 HTML 源。

更难获得结构化数据 - 结构化数据必须是有效的 HTML，否则您必须自己转义和转换字符串。

将 PHP 与您的数据逻辑紧密结合 - 因为 PHP 用于表示，所以您无法将两者完全分开。

实现示例

有了这个，想法是创建某种不会向用户显示但对 JavaScript 可见的元素。

索引.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 用于表示，所以您无法将两者完全分开。

实现示例

实现相对简单：

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

祝你好运！

---

我通常在 HTML 中使用 data-* 属性。

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

</div>

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

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

此示例使用 jQuery，但它可以适用于其他库或 vanilla JavaScript。

您可以在此处阅读有关数据集属性的更多信息：https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.dataset

---

我将尝试一个更简单的答案：

问题的解释

首先，让我们了解从我们的服务器提供页面时的事件流：

首先运行 PHP，它生成提供给客户端的 HTML。

然后，HTML 被交付给客户端，在 PHP 完成之后，我想强调的是，一旦代码离开服务器 - PHP 已经完成并且无法再访问它。

然后，带有 JavaScript 的 HTML 到达客户端，客户端可以在该 HTML 上执行 JavaScript。

所以说真的，这里要记住的核心是 HTTP 是无状态的。一旦一个请求离开了服务器，服务器就无法触及它。所以，这让我们的选择：

在初始请求完成后从客户端发送更多请求。编码服务器在初始请求中必须说的内容。

解决方案

你应该问自己的核心问题是：

我是在写网站还是应用程序？

网站主要是基于页面的，页面加载时间需要尽可能快（例如 - 维基百科）。 Web 应用程序更重 AJAX 并执行大量往返以获取客户端快速信息（例如 - 股票仪表板）。

网站

在初始请求完成后从客户端发送更多请求很慢，因为它需要更多的 HTTP 请求，这会产生很大的开销。此外，它需要异步性，因为发出 AJAX 请求需要一个处理程序来完成它。

除非您的站点是用于从服务器获取该信息的应用程序，否则我不建议您提出另一个请求。

您需要对转换和加载时间产生巨大影响的快速响应时间。在这种情况下，发出 Ajax 请求对于初始正常运行时间来说很慢，而且是不必要的。

你有两种方法来解决这个问题

设置 cookie - cookie 是服务器和客户端都可以读取的 HTTP 请求中发送的标头。

将变量编码为 JSON - JSON 看起来非常接近 JavaScript 对象，并且大多数 JSON 对象都是有效的 JavaScript 变量。

Setting a cookie 真的不是很困难，你只需给它赋值：

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

然后，您可以使用 document.cookie read it with JavaScript：

这是一个简短的手动解析器，但我在上面链接到的答案有更好的测试：

var cookies = document.cookie.split(";").
    map(function(el){ return el.split("="); }).
    reduce(function(prev,cur){ prev[cur[0]] = cur[1]; return prev },{});
alert(cookies["MyCookie"]); // Value set with PHP.

Cookies 适用于少量数据。这是跟踪服务经常做的事情。

一旦我们有了更多数据，我们可以在 JavaScript 变量中使用 JSON 对其进行编码：

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

假设 $value 可以在 PHP 端json_encode（通常是）。例如，这种技术就是 Stack Overflow 的聊天功能（仅使用 .NET 而不是 PHP）。

应用

如果您正在编写一个应用程序 - 突然之间，初始加载时间并不总是像应用程序的持续性能那么重要，并且开始单独加载数据和代码开始获得回报。

我的回答 here 解释了如何在 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
header("Content-Type: application/json"); // Advise client of response type
echo json_encode($val); // Write it to the output

这样，我们的 JavaScript 文件会要求数据并显示它，而不是要求代码或布局。这更干净，并且随着应用程序变得更高而开始得到回报。它还可以更好地分离关注点，它允许在不涉及任何服务器端技术的情况下测试客户端代码，这是另一个优点。

后记：当您从 PHP 到 JavaScript 注入任何东西时，您必须非常了解 XSS 攻击向量。 非常很难正确转义值并且它是上下文敏感的。如果您不确定如何处理 XSS，或者不知道它 - 请阅读 this OWASP article、this one 和 this question。

---

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

json_encode() 要求：

PHP 5.2.0 或更高版本

$PHPVar 编码为 UTF-8、Unicode。

---

只需使用以下方法之一。

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

---

我非常喜欢 WordPress 使用其 enqueue 和 localize 函数的方式，因此按照该模型，我编写了一个简单的类，用于根据脚本依赖项将脚本放入页面，并为脚本提供额外的数据.

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-ui”中定义的，它依赖于“jquery”。 'custom-script' 的附加数据位于一个新的脚本块内并放置在它的前面，它包含保存附加数据的 mydata 对象，现在可用于“custom-script”。

---

尝试这个：

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

--

- 在尝试了一段时间之后

虽然它有效，但它会降低性能。因为 PHP 是服务器端脚本，而 JavaScript 是用户端。

---