传递PHP变量和数据到JavaScript的方法

Question

我在PHP中有一个变量，我需要在我的JavaScript代码中使用它的值。我怎样才能从PHP将我的变量传递到JavaScript中？

我有如下代码：

<?php
$val = $myService->getValue(); // 进行API和数据库调用

在同一个页面上，我有需要将$val变量的值作为参数传递的JavaScript代码：

<script>
    myPlugin.start($val); // 我尝试过这个，但是没有成功
    <?php myPlugin.start($val); ?> // 这个也没有成功
    myPlugin.start(<?=$val?>); // 这个有时候可以工作，但有时候会失败
</script>

Answer 1

我通常在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，但它可以适应其他库或原生JavaScript。

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

Answer 2

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

没有特定的顺序：

1. 使用AJAX从服务器获取所需的数据。
2. 将数据回显到页面的某个位置，并使用JavaScript从DOM中获取信息。
3. 直接将数据回显到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获取该输出的页面：

get-data.php

/* 在这里执行一些操作，比如与数据库、文件会话等进行交互
 * 超越世界，无间地带，闪烁之城和加拿大。
 *
 * AJAX通常使用字符串，但你也可以输出JSON、HTML和XML。
 * 这完全取决于你发送的AJAX请求的Content-type头。 */

echo json_encode(42); // 最后，你需要`echo`结果。
                      // 所有数据都应该使用`json_encode`。

                      // 你可以在PHP中`json_encode`任何值，数组、字符串，
                      // 甚至对象。

index.php（或实际页面的名称）

<!-- 省略 -->
<script>
    fetch("get-data.php")
        .then((response) => {
            if(!response.ok){ // 在解析（即解码）JSON数据之前，
                              // 检查是否有任何错误。
                // 如果有错误，抛出错误。
                throw new Error("Something went wrong!");
            }

            return response.json(); // 解析JSON数据。
        })
        .then((data) => {
             // 在这里处理响应。
             alert(data); // 将弹出：42
        })
        .catch((error) => {
             // 在这里处理错误。
        });
</script>
<!-- 省略 -->

上述两个文件的组合将在文件加载完成时弹出42。

更多阅读材料

• 使用Fetch API
• 如何从异步调用中返回响应？

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

<!-- 省略 -->
<div id="dom-target" style="display: none;">
    <?php
        $output = "42"; // 再次，执行一些操作，获取输出。
        echo htmlspecialchars($output); /* 必须转义，否则结果
                                           将不是有效的HTML。 */
    ?>
</div>
<script>
    var div = document.getElementById("dom-target");
    var myData = div.textContent;
</script>
<!-- 省略 -->

3. 直接将数据回显到JavaScript中

这可能是最容易理解的方法。

优点

• 非常容易实现 - 实现这一点所需的成本非常低，而且容易理解。
• 不会污染源代码 - 变量直接输出到JavaScript中，因此