如何将变量和数据从PHP传递到JavaScript?

我有一个变量在PHP，我需要它的值在我的JavaScript代码。我怎么能把我的变量从PHP到JavaScript?

我有这样的代码:

<?php
$val = $myService->getValue(); // Makes an API and database call

在同一页上，我有JavaScript代码，需要$val变量的值作为参数传递:

<script>
    myPlugin.start($val); // I tried this, but it didn't work
    <?php myPlugin.start($val); ?> // This didn't work either
    myPlugin.start(<?=$val?>); // This works sometimes, but sometimes it fails
</script>

当前回答

这是在2022年对我有用的，我使用这个解决方案来获取当前用户的电子邮件

我使用PHP创建了一个短代码，并将其添加到PHP .function:

function my_get_current_user_email(){
    $current_user = wp_get_current_user();
    $email = $current_user->user_email;
    return $email;  
} 
add_shortcode( 'get_email', 'my_get_current_user_email');

然后使用div来包装短代码:

 <div id="target-content" style="display: none;">
[get_email]
 </div>

最后，使用JavaScript访问Div的内容:

const databox = document.getElementById("target-content");
const dataContent = databox.textContent;
console.log(dataContent)

这工作完美地为我想要的，我希望它也会为你工作。

2022-10-11 16:26:37

其他回答

<script>
  var jsvar = <?php echo json_encode($PHPVar); ?>;
</script>

json_encode()要求:

PHP 5.2.0或更高版本 $PHPVar编码为UTF-8, Unicode。

2014-07-18 22:00:45

myPlugin.start($val); // Tried this, didn't work

它不起作用，因为就JavaScript而言，$val是未定义的，即PHP代码没有为$val输出任何东西。试着在浏览器中查看源代码，下面是你将看到的:

myPlugin.start(); // I tried this, and it didn't work

And

<?php myPlugin.start($val); ?> // This didn't work either

这并不管用，因为PHP将尝试将myPlugin视为常量，当失败时，它将尝试将其视为字符串'myPlugin'，它将尝试与PHP函数start()的输出连接，由于这是未定义的，它将产生一个致命的错误。

And

 myPlugin.start(<?=$val?> // This works sometimes, but sometimes it fails

虽然这是最有可能工作的，因为PHP代码生成了带有预期参数的有效JavaScript，但如果失败，很可能是因为myPlugin还没有准备好。检查你的执行顺序。

您还应该注意到，PHP代码输出是不安全的，应该使用json_encode()进行过滤。

EDIT

因为我没有注意到myPlugin.start(<?=$val?>: \

正如@Second Rikudo指出的那样，要正确工作，$val需要包含右括号，例如:$val="42);"

这意味着PHP现在将生成myPlugin.start(42);并在JavaScript代码执行时按预期工作。

2014-05-19 15:20:46

将数据转换为JSON 调用AJAX来接收JSON文件将JSON转换为Javascript对象

例子:

步骤1

<?php

   $servername = "localhost";
   $username = "";
   $password = "";
   $dbname = "";
   $conn = new mysqli($servername, $username, $password, $dbname);

   if ($conn->connect_error) {
      die("Connection failed: " . $conn->connect_error);
   } 

   $sql = "SELECT id, name, image FROM phone";
   $result = $conn->query($sql);

   while($row = $result->fetch_assoc()){ 
      $v[] = $row;    
   }

  echo json_encode($v);

  $conn->close();
?>

步骤2

function showUser(fnc) {
   var xhttp = new XMLHttpRequest();

   xhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
         // STEP 3    
         var p = JSON.parse(this.responseText);
      }
   }
}

2018-07-19 12:15:26

我通常在HTML中使用data-*属性。

<div
    class="service-container"
    data-service="<?= htmlspecialchars($myService->getValue()) ?>"
>

</div>

<script>
    $(document).ready(function() {
        $('.service-container').each(function() {
            var container = $(this);
            var service = container.data('service');

            // Var "service" now contains the value of $myService->getValue();
        });
    });
</script>

这个例子使用了jQuery，但是它可以用于其他库或普通JavaScript。

你可以在这里阅读更多关于dataset属性的信息:https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.dataset

2014-05-22 17:14:25