傳遞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中，因此