資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究如何將PHP變數賦值給JavaScript？
使用單引號或雙引號的PHP標籤在設定PHP變數時將PHP值賦給JavaScript變數。很多時候，您可能需要將PHP變數值放入JavaScript中。如果只有簡單的變數，例如字串或任何整數，您可以使用PHP標籤輕鬆地將值輸出到JS變數中。
在將變數從PHP傳遞到JavaScript之前，瞭解訪問PHP網站時操作的順序是必要的。PHP會首先執行您的.php檔案以生成HTML。PHP處理完程式碼後，您的程式碼將被髮送到客戶端的瀏覽器。一旦程式碼到達瀏覽器，PHP就無法再訪問它了。JavaScript在PHP之後執行，因為它在瀏覽器內執行。
請參考每種方法下面的語法進行實現。
使用Echo
當PHP和JavaScript程式碼都在同一頁面上時，您可以使用echo直接將PHP變數傳遞給JavaScript。
語法
<?php $phpvar="something"; ?> <script> const phpecho="<?php echo $phpvar; ?>"; //print </script>
JavaScript變數賦值PHP echo語句。列印JavaScript變數將得到PHP變數的值。
示例
此示例與語法類似。此外，整數顯示不需要引號。陣列顯示需要json_encode函式。
Index.php
<html>
<body>
<h2>Program to assign PHP variable value as JavaScript using <i>echo</i></h2>
<?php
$phpvar="I am php variable";
$intval=100;
$arrval=[10, 20, 30];
?>
<b id="output"></b>
<script>
const phpecho="<?php echo $phpvar; ?>";
const intout=<?php echo $intval; ?>;
const arrout=<?php echo json_encode($arrval); ?>;
const output=document.getElementById("output");
let strvar="String = "+phpecho + "<br><br>";
strvar+= "Integer = "+intout + "<br><br>";
strvar+= "Array = "+arrout;
output.innerHTML=strvar;
</script>
</body>
</html>
使用DOM
有時在使用者操作後，您可能需要PHP變數。除了使用echo方法之外，您還可以使用DOM標籤將PHP資料儲存在HTML中。這種方法與直接使用echo類似，但更簡潔，因為它輸出到DOM而不是JavaScript變數。
語法
<div id="color" style="display: none;">
<?php
$color="Blue";
echo htmlspecialchars($color);
?>
</div>
<script>
const color=document.getElementById("color").textContent;
//print
</script>
DOM賦值PHP echo語句。指令碼讀取DOM以獲取PHP變數的值。
示例
此示例與語法類似。DOM賦值字串、整數和陣列，並在JavaScript中顯示。
Index.php
<html>
<body>
<h2>Program to assign PHP variable value as JavaScript using <i>DOM</i></h2>
<div id="color" style="display: none;">
<?php
$color="Blue";
echo htmlspecialchars($color);
?>
</div>
<div id="score" style="display: none;">
<?php
$score=1000;
echo htmlspecialchars($score);
?>
</div>
<div id="fruits" style="display: none;">
<?php
$fruits=["Apple", "Orange"];
echo json_encode($fruits);
?>
</div>L
<b id="result"></b>
<script>
const color=document.getElementById("color").textContent;
const score=document.getElementById("score").textContent;
const fruits=document.getElementById("fruits").textContent;
const result=document.getElementById("result");
result.innerHTML=color +" - "+ score+" - "+fruits;
</script>
</body>
</html>
使用Fetch API
如果您希望保持JavaScript程式碼獨立於PHP模板，請使用JavaScript Fetch API。
與AJAX和XMLHTTPRequest類似，Fetch API用於傳送HTTP請求。您現在可以訪問網際網路上任何位置的資源。可以使用Fetch從JavaScript檢索PHP資料。
與其他兩種方法相比，這種方法會生成HTTP請求，導致資料獲取之前會有延遲。
當您的PHP資料需要經過複雜的處理才能傳送到JavaScript時，最好使用Fetch API。
語法
<script>
fetch("info.php")
.then((result)=> result.json())
.then((outcome)=>{//print });
</script>
Fetch API從另一個PHP檔案返回JSON響應。結果部分可以列印此PHP變數的值。
示例
程式執行方式與語法類似。fetch回撥將info.php中的陣列資料轉換為字串。
Info.php
<?php
$colorarr=[
"vt"=>"Violet",
"io"=>"Indigo"
];
echo json_encode($colorarr);
?>
Index.php
<html>
<body>
<h2>Program to assign PHP variable value as JavaScript using <i>fetch API</i></h2>
<div id="display"></div>
<script>
fetch("info.php")
.then((result)=> result.json())
.then((outcome)=>{
const display=document.getElementById("display");
display.textContent=JSON.stringify(outcome);
});
</script>
</body>
</html>
使用簡短的PHP echo標籤
語法
<?php $book='Novel'; ?> <script> var varjs='<?=$book?>'; //print </script>
JavaScript變數賦值簡短的echo標籤。顯示此變數將得到PHP變數的值。
示例
程式執行方式與echo方法類似。唯一的區別是簡短的語法。
Index.php
<html>
<body>
<h2>Program to assign PHP variable value as JavaScript using <i>short PHP echo tag</i></h2>
<b id="res"></b>
<?php
$book='Novel';
?>
<script>
var varjs='<?=$book?>';
var dom=document.getElementById("res");
dom.innerHTML=varjs;
</script>
</body>
</html>
使用XMLHttpRequest
為了將變數和資料從PHP伺服器傳輸到JavaScript，我們可以使用AJAX。它提高了可讀性並使程式碼更簡潔。
由於此過程的非同步特性，網頁更新無需重新載入頁面。但是，由於AJAX在網路上使用時會發送HTTP請求，因此會產生延遲。
語法
<script>
var request=new XMLHttpRequest();
request.onload=function() {
console.log(this.responseText);
};
request.open("get", "info.php", true);
request.send();
</script>
XMLHttpRequest從另一個PHP檔案檢索資料。onload函式塊可以在響應中顯示PHP變數。
示例
示例按語法執行。onload回撥中的responseText顯示info.php中的PHP變數。
Index.php
<html>
<body>
<h2>Program to assign PHP variable value as JavaScript using <i>XMLHttpRequest</i></h2>
<b id="out"></b>
<script>
var outEl=document.getElementById("out");
var request=new XMLHttpRequest();
request.onload=function() {
outEl.innerHTML=this.responseText;
};
request.open("get", "info.php", true);
request.send();
</script>
</body>
</html>
Info.php
<?php $wish="Hello Index PHP. I am Info PHP"; echo json_encode($wish); ?>
在script標籤內使用PHP語法
語法
<?php $count='One'; ?> <script> <?php echo "var strjs ='$count';"; ?> //print </script>
script標籤內的PHP語法中的JavaScript變數包含PHP變數的值。
示例
程式按語法執行。script標籤內的PHP語法中的JavaScript變數充當普通的JavaScript變數。JavaScript變數賦值PHP變數的值。
Index.php
<html>
<body>
<h2>Program to assign PHP variable value as JavaScript using <i>PHP syntax inside script tag</i></h2>
<b id="disp"></b>
<?php
$count='One-Two';
?>
<script>
<?php
echo "var strjs ='$count';";
?>
var disEl=document.getElementById("disp");
disEl.innerHTML=strjs;
</script>
</body>
</html>
本教程討論瞭如何將PHP變數值賦值為JavaScript。echo方法很簡單，您可以根據上下文使用其他方法。
21K+ 瀏覽量
