我有一个变量在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>
当前回答
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代码执行时按预期工作。
其他回答
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代码执行时按预期工作。
我想出了一个简单的方法来分配JavaScript变量使用PHP。
它使用HTML5数据属性来存储PHP变量，然后在页面加载时分配给JavaScript。
例子:
<?php
$variable_1 = "QNimate";
$variable_2 = "QScutter";
?>
<span id="storage" data-variable-one="<?php echo $variable_1; ?>" data-variable-two="<?php echo $variable_2; ?>"></span>
<?php
下面是JavaScript代码
var variable_1 = undefined;
var variable_2 = undefined;
window.onload = function(){
variable_1 = document.getElementById("storage").getAttribute("data-variable-one");
variable_2 = document.getElementById("storage").getAttribute("data-variable-two");
}
这是在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)
这工作完美地为我想要的，我希望它也会为你工作。
我通常在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
假设变量总是整数。在这种情况下，这样做更容易:
<?PHP
$number = 4;
echo '<script>';
echo 'var number = ' . $number . ';';
echo 'alert(number);';
echo '</script>';
?>
输出:
<script>var number = 4;alert(number);</script>
假设你的变量不是整数，但如果你尝试上面的方法，你会得到这样的结果:
<script>var number = abcd;alert(number);</script>
但在JavaScript中，这是一个语法错误。
在PHP中，我们有一个函数json_encode，它将字符串编码为JSON对象。
<?PHP
$number = 'abcd';
echo '<script>';
echo 'var number = ' . json_encode($number) . ';';
echo 'alert(number);';
echo '</script>';
?>
因为abcd在JSON中是“abcd”，它看起来像这样:
<script>var number = "abcd";alert(number);</script>
你可以对数组使用相同的方法:
<?PHP
$details = [
'name' => 'supun',
'age' => 456,
'weight' => '55'
];
echo '<script>';
echo 'var details = ' . json_encode($details) . ';';
echo 'alert(details);';
echo 'console.log(details);';
echo '</script>';
?>
你的JavaScript代码看起来是这样的:
<script>var details = {"name":"supun","age":456,"weight":"55"};alert(details);console.log(details);</script>
控制台输出
