我通常在HTML中使用data-*屬性。

這個範例使用了jQuery，但它可以適應其他函式庫或原生JavaScript。

您可以在這裡閱讀有關dataset屬性的更多資訊：https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.dataset

實際上有幾種方法可以做到這一點。有些方法需要更多的開銷，有些方法被認為比其他方法更好。

沒有特定的順序：

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（或實際頁面的名稱）

上述兩個檔案的組合將在檔案載入完成時彈出42。

更多閱讀材料

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

#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

3. 直接將資料回顯到JavaScript中

這可能是最容易理解的方法。

優點

• 非常容易實現- 實現這一點所需的成本非常低，而且很容易理解。
• 不會污染原始碼- 變數直接輸出到JavaScript中，因此