如何将一个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>