如何將變數和資料從 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>

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。

您可以在此處閱讀有關資料集屬性的更多資訊：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 取得該輸出的頁面：

取得資料.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。

更多閱讀材料

• 使用 Fetch API
• #如何從 an-ajax-call 回傳回應非同步呼叫？

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

祝你好運！