我在 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>
实际上有几种方法可以做到这一点。有些比其他需要更多的开销，有些被认为比其他更好。
没有特定的顺序：
在这篇文章中，我们将检查上述每种方法，并了解每种方法的优缺点，以及如何实现它们。
这种方法被认为是最好的，因为您的服务器端和客户端脚本是完全独立的。
使用 AJAX，您需要两个页面，一个是 PHP 生成输出的地方，第二个是 JavaScript 获取输出的地方：
/* Do some operation here, like talk to the database, the file-session
* The world beyond, limbo, the city of shimmers, and Canada.
*
* AJAX generally uses strings, but you can output JSON, HTML and XML as well.
* It all depends on the Content-type header that you send with your AJAX
* request. */
echo json_encode(42); // In the end, you need to echo the result.
// All data should be json_encode()d.
// You can json_encode() any value in PHP, arrays, strings,
//even objects.
<!-- snip -->
<script>
function reqListener () {
console.log(this.responseText);
}
var oReq = new XMLHttpRequest(); // New request object
oReq.onload = function() {
// This is where you handle what to do with the response.
// The actual data is found on this.responseText
alert(this.responseText); // Will alert: 42
};
oReq.open("get", "get-data.php", true);
// ^ Don't block the rest of the execution.
// Don't wait until the request finishes to
// continue.
oReq.send();
</script>
<!-- snip -->
42当文件加载完成时，上述两个文件的组合将发出警报。
这种方法不如 AJAX 好，但它仍然有它的优点。从某种意义上说，PHP 和 JavaScript 之间还是相对分离的，JavaScript 中没有直接使用 PHP。
<input type=hidden>来存储信息，因为从 中获取信息更容易inputNode.value，但这样做意味着您的 HTML 中有一个毫无意义的元素。HTML 具有<meta>用于有关文档的数据的元素，而 HTML 5 引入data-*了专门用于使用 JavaScript 读取的数据属性，这些属性可以与特定元素相关联。有了这个，我们的想法是创建某种不会向用户显示但对 JavaScript 可见的元素。
<!-- snip -->
<div id="dom-target" style="display: none;">
<?php
$output = "42"; // Again, do some operation, get the output.
echo htmlspecialchars($output); /* You have to escape because the result
will not be valid HTML otherwise. */
?>
</div>
<script>
var div = document.getElementById("dom-target");
var myData = div.textContent;
</script>
<!-- snip -->
这可能是最容易理解的。
实现相对简单：
<!-- snip -->
<script>
var data = <?php echo json_encode("42", JSON_HEX_TAG); ?>; // Don't forget the extra semicolon!
</script>
<!-- snip -->
祝你好运！
我通常在 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，但它可以适用于其他库或 vanilla JavaScript。
您可以在此处阅读有关数据集属性的更多信息：https : //developer.mozilla.org/en-US/docs/Web/API/HTMLElement.dataset
我将尝试一个更简单的答案：
首先，让我们了解从我们的服务器提供页面时的事件流：
所以真的，这里要记住的核心是HTTP 是无状态的。一旦请求离开服务器，服务器就不能再接触它。所以，我们的选择是：
这是你应该问自己的核心问题是：
网站主要是基于页面的，页面加载时间需要尽可能快（例如 - 维基百科）。Web 应用程序更重 AJAX，并执行大量往返以获取客户端快速信息（例如 - 股票仪表板）。
在初始请求完成后从客户端发送更多请求很慢，因为它需要更多具有显着开销的 HTTP 请求。此外，它需要异步性，因为 AJAX 请求在完成时需要一个处理程序。
除非您的站点是从服务器获取该信息的应用程序，否则我不建议再次发出请求。
您需要快速响应时间，这会对转换和加载时间产生巨大影响。在这种情况下，发出 Ajax 请求的初始正常运行时间很慢，而且是不必要的。
你有两种方法来解决这个问题
设置一个cookie真的不是很困难，你只要给它赋值即可：
setcookie("MyCookie", $value); // Sets the cookie to the value, remember, do not
// Set it with HTTP only to true.
然后，您可以使用JavaScript阅读使用document.cookie：
这是一个简短的手动解析器，但我在上面链接的答案有更好的测试：
var cookies = document.cookie.split(";").
map(function(el){ return el.split("="); }).
reduce(function(prev,cur){ prev[cur[0]] = cur[1]; return prev },{});
alert(cookies["MyCookie"]); // Value set with PHP.
Cookies 适用于少量数据。这就是跟踪服务经常做的事情。
一旦我们有更多数据，我们可以在 JavaScript 变量中使用 JSON 对其进行编码：
<script>
var myServerData = <?=json_encode($value)?>; // Don't forget to sanitize
//server data
</script>
假设$value是json_encode能够在PHP端（通常是这样）。这种技术就是 Stack Overflow 对其聊天所做的事情（仅使用 .NET 而不是 PHP）。
如果您正在编写应用程序 - 突然之间，初始加载时间并不总是与应用程序的持续性能一样重要，并且开始分别加载数据和代码是值得的。
我在这里的回答解释了如何在 JavaScript 中使用 AJAX 加载数据：
function callback(data){
// What do I do with the response?
}
var httpRequest = new XMLHttpRequest;
httpRequest.onreadystatechange = function(){
if (httpRequest.readyState === 4) { // Request is done
if (httpRequest.status === 200) { // successfully
callback(httpRequest.responseText); // We're calling our method
}
}
};
httpRequest.open('GET', "/echo/json");
httpRequest.send();
或者使用 jQuery：
$.get("/your/url").done(function(data){
// What do I do with the data?
});
现在，服务器只需要包含一个/your/url路由/文件，其中包含获取数据并对其进行处理的代码，在您的情况下：
<?php
$val = myService->getValue(); // Makes an API and database call
header("Content-Type: application/json"); // Advise client of response type
echo json_encode($val); // Write it to the output
这样，我们的 JavaScript 文件会要求数据并显示它，而不是要求代码或布局。这更干净，并且随着应用程序变得更高而开始得到回报。它也是更好的关注点分离，它允许在不涉及任何服务器端技术的情况下测试客户端代码，这是另一个优点。
后记：当您将任何东西从 PHP 注入到 JavaScript 时，您必须非常了解 XSS 攻击媒介。这是非常难以逃脱正确的value观和它的上下文敏感的。如果您不确定如何处理 XSS，或者不知道它 - 请阅读这篇 OWASP 文章、这篇文章和这个问题。
<script>
var jsvar = <?php echo json_encode($PHPVar); ?>;
</script>
json_encode() 要求：
$PHPVar 编码为 UTF-8、Unicode。只需使用以下方法之一。
<script type="text/javascript">
var js_variable = '<?php echo $php_variable;?>';
<script>
或者
<script type="text/javascript">
var js_variable = <?php echo json_encode($php_variable); ?>;
</script>