数据结构
网络
关系数据库管理系统 (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+ 浏览量
