首页  >  问答  >  正文

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

<p>我在 PHP 中有一个变量,我在 JavaScript 代码中需要它的值。如何将我的变量从 PHP 转换为 JavaScript?</p> <p>我的代码如下所示:</p> <pre class="brush:php;toolbar:false;"><?php $val = $myService->getValue(); // Makes an API and database call </pre> <p>在同一页面上,我有 JavaScript 代码,需要将 <code>$val</code> 变量的值作为参数传递:</p> <pre class="brush:js;toolbar:false;"><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> </pre> <p><br /></p>
P粉369196603P粉369196603442 天前460

全部回复(2)我来回复

  • P粉463811100

    P粉4638111002023-08-28 10:40:20

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

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

    回复
    0
  • P粉502608799

    P粉5026087992023-08-28 00:24:11

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

    排名不分先后:

    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>
        fetch("get-data.php")
            .then((response) => {
                if(!response.ok){ // Before parsing (i.e. decoding) the JSON data,
                                  // check for any errors.
                    // In case of an error, throw.
                    throw new Error("Something went wrong!");
                }
    
                return response.json(); // Parse the JSON data.
            })
            .then((data) => {
                 // This is where you handle what to do with the response.
                 alert(data); // Will alert: 42
            })
            .catch((error) => {
                 // This is where you handle errors.
            });
    </script>
    <!-- snip -->
    

    以上两个文件的组合将在文件加载完成时发出警报 42

    更多阅读材料

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

    这种方法不如 AJAX 好,但它仍然有其优点。 PHP 和 JavaScript 之间仍然相对分开,从某种意义上说,JavaScript 中没有直接的 PHP。

    优点

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

    缺点

    • 潜在的非语义标记 - 通常,您会使用某种 来存储信息,因为获取信息更容易超出 inputNode.value,但这样做意味着 HTML 中存在无意义的元素。 HTML 具有用于表示有关文档的数据的 元素,并且 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 -->
    

    祝你好运!

    回复
    0
  • 取消回复