我有一个变量在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>
当前回答
PHP
$fruits = array("apple" => "yellow", "strawberry" => "red", "kiwi" => "green");
<script>
var color = <?php echo json_encode($fruits) ?>;
</script>
<script src="../yourexternal.js"></script>
JS （yourexternal.js）
alert("The apple color is" + color['apple'] + ", the strawberry color is " + color['strawberry'] + " and the kiwi color is " + color['kiwi'] + ".");
输出
苹果是黄色的，草莓是红色的，猕猴桃是红色的 颜色是绿色。
其他回答
假设变量总是整数。在这种情况下，这样做更容易:
<?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>
控制台输出
我通常在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
我假设要传输的数据是一个字符串。
正如其他评论者所述，AJAX是一种可能的解决方案，但缺点大于优点:它有延迟，并且更难编程(它需要代码来检索服务器端和客户端值)，而更简单的转义函数应该就足够了。
所以，我们又回到了逃避。如果您首先将源字符串编码为UTF-8, json_encode($string)就可以工作，因为json_encode需要UTF-8数据。如果字符串在ISO-8859-1中，那么您可以简单地使用json_encode(utf8_encode($string));否则，你总是可以先使用iconv来进行转换。
但这里有个大问题。如果你在事件中使用它，你需要在结果上运行htmlspecialchars()，以使它成为正确的代码。然后，您必须小心使用双引号将事件括起来，或者始终将ENT_QUOTES添加到htmlspecialchars中。例如:
<?php
$myvar = "I'm in \"UTF-8\" encoding and I have <script>script tags</script> & ampersand!";
// Fails:
//echo '<body onload="alert(', json_encode($myvar), ');">';
// Fails:
//echo "<body onload='alert(", json_encode($myvar), ");'>";
// Fails:
//echo "<body onload='alert(", htmlspecialchars(json_encode($myvar)), ");'>";
// Works:
//echo "<body onload='alert(", htmlspecialchars(json_encode($myvar), ENT_QUOTES), ");'>";
// Works:
echo '<body onload="alert(', htmlspecialchars(json_encode($myvar)), ');">';
echo "</body>";
然而，你不能在常规JavaScript代码上使用htmlspecialchars(代码包含在<script>…> < /脚本标签)。这使得使用这个函数容易出错，在编写事件代码时忘记htmlspecialchars结果。
可以编写一个不存在该问题的函数，并且可以在事件和常规JavaScript代码中使用，只要始终用单引号或双引号括起事件。以下是我的建议，要求它们在双引号中(我更喜欢这样):
<?php
// Optionally pass the encoding of the source string, if not UTF-8
function escapeJSString($string, $encoding = 'UTF-8')
{
if ($encoding != 'UTF-8')
$string = iconv($encoding, 'UTF-8', $string);
$flags = JSON_HEX_TAG|JSON_HEX_AMP|JSON_HEX_APOS|JSON_HEX_QUOT|JSON_UNESCAPED_SLASHES;
$string = substr(json_encode($string, $flags), 1, -1);
return "'$string'";
}
该函数需要PHP 5.4+。使用示例:
<?php
$myvar = "I'm in \"UTF-8\" encoding and I have <script>script tags</script> & ampersand!";
// Note use of double quotes to enclose the event definition!
echo '<body onload="alert(', escapeJSString($myvar), ');">';
// Example with regular code:
echo '<script>alert(', escapeJSString($myvar), ');</script>';
echo '</body>';
<?php
$val = $myService->getValue(); // Makes an API and database call
echo "
<script>
myPlugin.start({$val});
</script> ";
?>
PHP
$fruits = array("apple" => "yellow", "strawberry" => "red", "kiwi" => "green");
<script>
var color = <?php echo json_encode($fruits) ?>;
</script>
<script src="../yourexternal.js"></script>
JS （yourexternal.js）
alert("The apple color is" + color['apple'] + ", the strawberry color is " + color['strawberry'] + " and the kiwi color is " + color['kiwi'] + ".");
输出
苹果是黄色的，草莓是红色的，猕猴桃是红色的 颜色是绿色。
