Heim  >  Fragen und Antworten  >  Hauptteil

So übergeben Sie PHP-Variablen und -Daten an JavaScript

<p>Ich habe eine Variable in PHP und muss ihren Wert in meinem JavaScript-Code verwenden. Wie kann ich meine Variablen von PHP an JavaScript übergeben? </p> <p>Ich habe den folgenden Code: </p> <pre class="brush:php;toolbar:false;"><?php $val = $myService->getValue(); // API- und Datenbankaufrufe durchführen </pre> <p>Auf derselben Seite habe ich JavaScript-Code, der den Wert der Variablen <code>$val</code> übergeben muss: </p> <pre class="brush:js;toolbar:false;"><script> myPlugin.start($val); // Ich habe es versucht, aber es hat nicht funktioniert <?php myPlugin.start($val); // Dies ist ebenfalls fehlgeschlagen myPlugin.start(<?=$val?>); // Das funktioniert manchmal, aber manchmal schlägt es fehl </script> </pre> <p><br /></p>
P粉004287665P粉004287665448 Tage vor426

Antworte allen(2)Ich werde antworten

  • P粉893457026

    P粉8934570262023-08-22 09:30:13

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

    Antwort
    0
  • P粉517090748

    P粉5170907482023-08-22 09:17:08

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

    没有特定的顺序:

    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

    更多阅读材料

    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中,因此

      Antwort
      0
  • StornierenAntwort