如何將變量從PHP傳遞給JavaScript
問題：
我在PHP中有一個變量，我JavaScript代碼中需要使用這個值，我如何將我的變量從PHP傳遞到JavaScript呢？
實際上有幾種方法來做到這一點。
- 使用AJAX從服務器獲取所需的數據。（推薦）
- 將數據回傳到某個位置，並使用JavaScript從DOM獲取信息。
- 將數據直接回傳到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
/* 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>
function reqListener () {
console.log(this.responseText);
}
var oReq = new XMLHttpRequest(); //New request object
oReq.onload = function() {
//This is where you handle what to do with the response.
//The actual data is found on this.responseText
alert(this.responseText); //Will alert: 42
};
oReq.open("get", "get-data.php", true);
// ^ Don't block the rest of the execution.
// Don't wait until the request finishes to
// continue.
oReq.send();
</script>
<!-- snip -->
上述兩個文件的組合將42在文件完成加載時發出警報。
2.將數據回傳到某個位置，並使用JavaScript從DOM獲取信息
這種方法不如AJAX優先，但它仍然有其優點。在PHP和JavaScript之間仍然相對分開，在JavaScript中直接沒有PHP。
優點
- 快速的 DOM操作通常很快，您可以相對快速地存儲和訪問大量數據。
缺點
- 潛在的無意義標記 - 通常，發生什麼事情是您使用某種方式
<input type=hidden>存儲信息，因爲更容易獲取信息inputNode.value，但這樣做意味着您的HTML中沒有意義的元素。HTML具有關於文檔的數據的元素，HTML5引入data-*了專門用於與可與特定元素相關聯的JS進行讀取的數據的屬性。 - 源代碼 - 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沒有微不足道的JavaScript轉義功能，它們不是簡單的實現。特別是當使用用戶輸入時，您非常容易受到二級注入的攻擊。爭議見評論
- 將PHP與數據邏輯結合在一起 - 由於在演示中使用了PHP，因此無法將兩者完全分開。
- 結構化數據很難 - 你可能可以做JSON …有點。但XML和HTML需要特別注意。
實例
<!-- snip -->
<script>
var data = <?php echo json_encode("42", JSON_HEX_TAG); ?>; //Don't forget the extra semicolon!
</script>
<!-- snip -->