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

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

javascript php

答案

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

没有特别的顺序：

使用 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 获取该输出的页面：

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 <strong>echo</strong> the result.
                      // All data should be <em>json_encode()</em>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

一些更多的阅读材料

2. 将数据回显到页面中的某个位置，然后使用 JavaScript 从 DOM 获取信息。

这种方法不如 AJAX 更好，但仍具有其优点。从某种意义上说，在 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 -->

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

祝你好运！

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

问题说明

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

首先运行 PHP，它将生成提供给客户端的 HTML。
然后，将 HTML 交付给客户端，在 PHP 完成后，我想强调一下，一旦代码离开服务器，PHP 就完成了，并且无法再访问它。
然后，带有 JavaScript 的 HTML 到达客户端，客户端可以在该 HTML 上执行 JavaScript。

所以确实，这里要记住的核心是HTTP 是无状态的。请求离开服务器后，服务器将无法触摸它。因此，我们可以选择：

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

解决方案

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

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

网站主要基于页面，并且页面加载时间需要尽可能快（例如 Wikipedia）。 Web 应用程序的 AJAX 更为繁重，并且需要执行许多往返操作才能快速获取客户端信息（例如 - 库存仪表板）。

网站

完成初始请求后，从客户端发送更多请求的速度很慢，因为它需要更多的 HTTP 请求，而这些请求的开销很大。而且，它要求异步，因为发出 AJAX 请求需要一个处理程序来处理它的完成时间。

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

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

您有两种方法可以解决此问题

设置 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使用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.

Cookies 有助于获取少量数据。这就是跟踪服务经常做的事情。

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

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

假设$value json_encode （通常是）。例如，此技术就是 Stack Overflow 对其聊天进行的处理（仅使用. NET 而不是 PHP）。

应用

如果您正在编写应用程序 - 突然，初始加载时间并不总是与应用程序的持续性能一样重要，并且开始获得回报以分别加载数据和代码。

我在这里的答案说明了如何在 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 文件会要求数据并显示它，而不是要求代码或布局。这是更干净的应用程序，随着应用程序变得更高，它开始获得回报。它也可以更好地分离关注点，并且可以在不涉及任何服务器端技术的情况下测试客户端代码，这是另一个优点。

附言：从 PHP 到 JavaScript 注入任何东西时，您必须非常了解 XSS 攻击媒介。正确地转义值非常困难，而且它是上下文相关的。如果您不确定如何处理 XSS，或者不知道它 - 请阅读此文章 OWASP ，这个和这个问题。

我通常在 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