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

Question

我在 PHP 中有一个变量，我需要它在我的 JavaScript 代码中的值。如何将我的变量从 PHP 获取到 JavaScript？

我的代码如下所示：

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

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

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

原文由 Madara‘s Ghost 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

没有特别的顺序：

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 获取该输出的地方：

获取数据.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 操作通常很快，您可以相对快速地存储和访问大量数据。

缺点

• 潜在的无语义标记- 通常情况下，您使用某种 <input type=hidden> 来存储信息，因为从 inputNode.value 中获取信息更容易，但这样做意味着您在您的 HTML 中有一个无意义的元素。 HTML 具有 <meta> 用于文档数据的元素，而 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 -->

祝你好运！

原文由 Madara‘s Ghost 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

这就是 2022 年对我有用的方法，我使用这个解决方案来获取当前用户的电子邮件

我使用 PHP 创建了一个短代码并将其添加到 PHP .function：

 function my_get_current_user_email(){
    $current_user = wp_get_current_user();
    $email = $current_user->user_email;
    return $email;
}
add_shortcode( 'get_email', 'my_get_current_user_email');

然后使用 div 包装短代码：

  <div id="target-content" style="display: none;">
[get_email]
 </div>

最后，使用 JavaScript 访问 Div 的内容：

 const databox = document.getElementById("target-content");
const dataContent = databox.textContent;
console.log(dataContent)

这非常适合我想要的，我希望它也适合你。

原文由 Tsquare07 发布，翻译遵循 CC BY-SA 4.0 许可协议