极客教程如何将一个PHP变量分配给JavaScript
在设置PHP变量时，带有单引号或双引号的PHP标签会将一个PHP值分配给一个JavaScript变量。有几次，你可能需要把PHP变量的值放在JavaScript中。如果只有简单的变量，如一个字符串或任何整数，你可以很容易地用PHP标签在JS变量上回音。
在将一个变量从PHP传给JavaScript之前，了解访问PHP网站时的动作顺序是必要的。为了创建HTML，PHP将首先运行your.php文件。当PHP处理完后，你的代码将被传递到客户的浏览器中。一旦文件到了浏览器中，PHP就不能访问它了。JavaScript是在PHP之后执行的，因为它在浏览器中运行。
请参考每个方法下面的语法实现。
Using Echo
当PHP和JavaScript代码都在同一个页面上时，可以使用echo将PHP变量直接传送给JavaScript。
语法
<?php
phpvar="something";
?>
<script>
const phpecho="<?php echophpvar; ?>";
//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 echophpvar; ?>";
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标签在HTML中存储PHP数据。这种方法与直接使用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回声标签
语法
<?php
book='Novel';
?>
<script>
var varjs='<?=book?>';
//print
</script>
JavaScript变量分配了短的回声标签。显示这个变量可以得到PHP的变量值。
示例
该程序的工作原理与回声法类似。唯一的区别是短句法。
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);
?>
在脚本标签内使用PHP语法
语法
<?php
count='One';
?>
<script>
<?php
echo "var strjs ='count';";
?>
//print
</script>
脚本标签内的PHP语法中的JavaScript变量包含PHP变量值。
示例
程序按照语法运行。在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的方法很简单，你可以根据上下文使用其他方法。