如何将变量和数据从 PHP 传递到 JavaScript？
Posted
技术标签:
【中文标题】如何将变量和数据从 PHP 传递到 JavaScript？【英文标题】：How do I pass variables and data from PHP to JavaScript? 【发布时间】：2014-07-07 13:53:23 【问题描述】：我在 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?> 中缺少的右括号是故意的吗？ “这有时有效”是真的吗？
好吧，这实际上是 Ben 写的，但我们只是说如果 $val 是 "42)" 它会很好用：D
【参考方案1】：
对于某些用例，我们也可以这样做：
<?php
$inPhpVar = "i am php var";
$ScriptInline = <<<JS
<script>
alert('$inPhpVar that used in js code');
</script>
JS;
echo $ScriptInline;
?>
【讨论】：
【参考方案2】：我提出了一种使用 PHP 分配 JavaScript 变量的简单方法。
它使用 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");
【讨论】：
虽然数据属性是问题的合理解决方案，但如果您不转义其中的数据，您最终会遇到与原始问题类似的问题。只是你需要为 HTML 而不是 JS 转义它们。 这个策略已经在another answer中详述了。【参考方案3】：我将尝试一个更简单的答案：
问题说明
首先，让我们了解从我们的服务器提供页面时的事件流：
首先运行 PHP，它会生成提供给客户端的 HTML。 然后，HTML 被交付给客户端，在 PHP 处理完之后，我想强调的是，一旦代码离开服务器 - PHP 已经处理完毕，无法再访问它。 然后，带有 JavaScript 的 HTML 到达客户端，客户端可以在该 HTML 上执行 JavaScript。真的，这里要记住的核心是HTTP 是无状态的。一旦一个请求离开了服务器，服务器就无法触及它。因此，我们的选择是：
-
在初始请求完成后从客户端发送更多请求。
对服务器在初始请求中所说的内容进行编码。
解决方案
你应该问自己的核心问题是：
我是在写网站还是应用程序？
网站主要基于页面，页面加载时间需要尽可能快（例如 - ***）。 Web 应用程序更重 AJAX 并且执行大量往返以获取客户端快速信息（例如 - 股票仪表板）。
网站
在初始请求完成后从客户端发送更多请求是慢，因为它需要更多的 HTTP 请求，这会产生很大的开销。此外，它需要 异步，因为发出 AJAX 请求需要一个处理程序来完成。
我会不建议再次请求除非您的网站是一个应用程序从服务器获取该信息。
您想要对转换和加载时间有巨大影响的快速响应时间。在这种情况下，发出 Ajax 请求对于初始正常运行时间来说很慢并且不需要。
你有两种方法来解决这个问题
设置 cookie - cookie 是 HTTP 请求中发送的标头，服务器和客户端都可以读取。 将变量编码为 JSON - JSON 看起来非常接近 JavaScript 对象，大多数 JSON 对象都是有效的 JavaScript 变量。Setting a cookie 真的不难，你给它赋值即可：
setcookie("MyCookie", $value); // Sets the cookie to the value, remember, do not
// Set it with HTTP only to true.
然后，您可以使用document.cookie read it with JavaScript：
这是一个短手滚动解析器，但我在上面链接到的答案有更好的测试：
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.
Cookie 适合存储少量数据。这就是跟踪服务经常做的事情。
一旦我们有了更多数据，我们就可以在 JavaScript 变量中使用 JSON 对其进行编码：
<script>
var myServerData = <?=json_encode($value)?>; // Don't forget to sanitize
//server data
</script>
假设 $value 在 PHP 端是 json_encodeable（通常是这样）。例如，这种技术就是 Stack Overflow 的聊天功能（仅使用 .NET 而不是 PHP）。
应用
如果您正在编写一个应用程序 - 突然之间，初始加载时间并不总是像应用程序的持续性能那么重要，并且开始单独加载数据和代码开始获得回报。
我的回答 here 解释了如何在 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 攻击向量。 非常很难正确转义值并且它是上下文敏感的。如果您不确定如何处理 XSS，或者不知道它 - 请阅读 this OWASP article、this one 和 this question。
【讨论】：
@cHao 更一般地说 - 编码被定义为一系列字符，概念对象的存在是哲学上的。但是，有诸如 JSON 对象之类的东西，它们是由 JSON 语法定义的。\u2028 等。你必须明确告诉它不要这样做。【参考方案4】：
我通常在 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。
您可以在此处阅读有关数据集属性的更多信息：https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.dataset
【讨论】：
对于大多数人来说，这个答案对我来说实际上似乎是最简单的。你赢得了赞成票！ 我同意，不想为一个简单的问题过度分析和实施一个奇特的解决方案。该方法将 PHP 与 Javascript 分离，因此 PHP 仍然只生成 HTML，而 Javascript 可以在 PHP 文件外部。 我同意这是最好的选择。它解决了所有安全问题，没有延迟。您可以将 JS 完全排除在 HTML 页面之外。 HTML 需要由应用程序服务器提供，但 JS（和 CSS）不需要。它也更具语义性。 @Quentin 你应该转义所有输出，除非输出是 HTML 本身。 @asdasd — 是的，我只是在解决您答案中代码的具体问题，而不是一般情况。【参考方案5】：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'] + ".");
输出
苹果色是黄色，草莓色是红色，猕猴桃 颜色是绿色的。
【讨论】：
【参考方案6】：<?php
$val = $myService->getValue(); // Makes an API and database call
echo "
<script>
myPlugin.start($val);
</script> ";
?>
【讨论】：
【参考方案7】：经过大量研究，我发现最简单的方法是轻松传递各种变量。
在服务器脚本中，您有两个变量，您正试图将它们发送到客户端脚本：
$php_var1 ="Hello world";
$php_var2 ="Helloow";
echo '<script>';
echo 'var js_variable1= ' . json_encode($php_var1) . ';';
echo 'var js_variable2= ' . json_encode($php_var2) . ';';
echo '</script>';
在页面上调用的任何 JavaScript 代码中，只需调用这些变量即可。
【讨论】：
【参考方案8】：假设你的变量总是整数。在这种情况下，这更容易：
<?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>';
?>
由于 JSON 中的 abcd 是 "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>
控制台输出
【讨论】：
【参考方案9】：这是诀窍：
这是您使用该变量的 'PHP'：
<?php
$name = 'PHP variable';
echo '<script>';
echo 'var name = ' . json_encode($name) . ';';
echo '</script>';
?>
现在您有一个名为 'name' 的 JavaScript 变量，下面是您使用该变量的 JavaScript 代码：
<script>
console.log("I am everywhere " + name);
</script>
【讨论】：
有什么办法可以让它不打印到源代码中？我正在传递一个庞大的数组，它阻塞了源。 你能提供一个示例测试用例吗？ 这不是和this answer中的“3.直接将数据回显到JavaScript”一样吗？那个看起来更好。【参考方案10】：我假设要传输的数据是一个字符串。
正如其他评论者所说，AJAX 是一种可能的解决方案，但缺点大于优点：它有延迟并且更难编程（它需要代码来检索服务器端和客户端的值），当一个更简单的转义函数就足够了。
所以，我们又要逃跑了。 json_encode($string) 有效如果您首先将源字符串编码为 UTF-8，以防它尚未编码，因为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>...</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>';
【讨论】：
【参考方案11】：根据您的代码
<$php
$val = $myService->getValue(); // Makes an API and database call
echo '<span id="value">'.$val.'</span>';
$>
现在您可以使用 DOM 获取值，使用 span id 的 innerHTML，在这种情况下，您不需要对服务器或 Ajax 或其他东西进行任何调用。
您的页面将使用 PHP 进行打印，而您的 JavaScript 将使用 DOM 获得价值。
【讨论】：
此代码易受 XSS 攻击，因为它不会转义< 和 > 等字符。此外，已经提出了类似的解决方案。【参考方案12】：
我非常喜欢 WordPress 使用其 enqueue 和 localize 函数的方式，因此按照该模型，我编写了一个简单的类，用于根据脚本依赖项将脚本放入页面，并提供额外的数据为脚本。
class mHeader
private $scripts = array();
/**
* @param string $id Unique script identifier
* @param string $src Script src attribute
* @param array $deps An array of dependencies ( script identifiers ).
* @param array $data An array, data that will be json_encoded and available to the script.
*/
function enqueue_script($id, $src, $deps = array(), $data = array())
$this->scripts[$id] = array('src' => $src, 'deps' => $deps, 'data' => $data);
private function dependencies($script)
if ($script['deps'])
return array_map(array($this, 'dependencies'), array_intersect_key($this->scripts, array_flip($script['deps'])));
private function _unset($key, &$deps, &$out)
$out[$key] = $this->scripts[$key];
unset($deps[$key]);
private function flattern(&$deps, &$out = array())
foreach($deps as $key => $value)
empty($value) ? $this->_unset($key, $deps, $out) : $this->flattern( $deps[$key], $out);
function print_scripts()
if (!$this->scripts)
return;
$deps = array_map(array($this, 'dependencies'), $this->scripts);
while ($deps)
$this->flattern($deps, $js);
foreach($js as $key => $script)
$script['data'] && printf("<script> var %s = %s; </script>" . PHP_EOL, key($script['data']), json_encode(current( $script['data'])));
echo "<script id=\"$key-js\" src=\"$script[src]\" type=\"text/javascript\"></script>" . PHP_EOL;
对enqueue_script()函数的调用用于添加脚本，设置源和对其他脚本的依赖，以及脚本所需的额外数据。
$header = new mHeader();
$header->enqueue_script('jquery-ui', '//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js', array('jquery'));
$header->enqueue_script('jquery', '//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js');
$header->enqueue_script('custom-script', '//custom-script.min.js', array('jquery-ui'), array('mydata' => array('value' => 20)));
$header->print_scripts();
并且，上述示例的print_scripts() 方法将发送此输出：
<script id="jquery-js" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
<script id="jquery-ui-js" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js" type="text/javascript"></script>
<script> var mydata = "value":20; </script>
<script id="custom-script-js" src="//custom-script.min.js" type="text/javascript"></script>
不管脚本“jquery”在“jquery-ui”之后排队，它都会在之前打印，因为它在“jquery-ui”中定义它依赖于“jquery”。
'custom-script' 的附加数据位于一个新的脚本块中并放置在它的前面，它包含包含附加数据的 mydata 对象，现在可用于 'custom-script'。
【讨论】：
【参考方案13】：试试这个：
<?php
echo "<script> var x = " . json_encode($phpVariable) . "</script>";
?>
--
-尝试了一段时间后
虽然它有效，但它会降低性能。因为 PHP 是服务器端脚本，而 JavaScript 是用户端。
【讨论】：
我们正在寻找提供一些解释和背景的长答案。不要只给出一条线的答案；解释为什么你的答案是正确的，最好是引用。不包括解释的答案可能会被删除。这写在问题上。 没什么好解释的，在 你确定吗？你见过这个问题的最佳答案吗？它解释了很多。更不用说您的解决方案不安全。$phpVariable = '42"; alert("I am evil!");';
是在此处添加回显以将其打印在其中包含此 php 代码的网页上，或者只是将数据放入 js 变量的语法的一部分。@YosraNagati
这里是为了让javascript能够访问它【参考方案14】：
myPlugin.start($val); // Tried this, didn't work
它不起作用，因为就 JavaScript 而言 $val 是未定义的，即 PHP 代码没有为 $val 输出任何内容。尝试在浏览器中查看源代码，您会看到以下内容：
myPlugin.start(); // I tried this, and it didn't work
和
<?php myPlugin.start($val); ?> // This didn't work either
这不起作用，因为 PHP 会尝试将 myPlugin 视为常量，当失败时，它将尝试将其视为字符串 'myPlugin'，它将尝试与 PHP 函数 @ 的输出连接987654328@ 并且由于未定义，因此将产生致命错误。
和
myPlugin.start(<?=$val?> // This works sometimes, but sometimes it fails
虽然这很可能有效，但由于 PHP 代码正在生成带有预期参数的有效 JavaScript，如果它失败了，很可能是因为 myPlugin 还没有准备好。检查您的执行顺序。
您还应注意，PHP 代码输出是不安全的，应使用json_encode() 过滤。
编辑
因为我没有注意到myPlugin.start(<?=$val?> 中缺少的括号：-\
正如@Second Rikudo 指出的那样，要使其正常工作$val 需要包含右括号，例如：$val="42);"
这意味着 PHP 现在将生成 myPlugin.start(42); 并在 JavaScript 代码执行时按预期工作。
【讨论】：
JSON 编码你的数据：myPlugin.start(<?=json_encode($val)?>);【参考方案15】：
实际上有几种方法可以做到这一点。有些需要比其他更多的开销，有些被认为比其他更好。
不分先后：
-
使用 AJAX 从服务器获取您需要的数据。
将数据回显到页面某处，并使用 JavaScript 从 DOM 获取信息。
将数据直接回显到 JavaScript。
在这篇文章中，我们将研究上述每种方法，并了解每种方法的优缺点，以及如何实现它们。
1。使用AJAX从服务器获取你需要的数据
这种方法被认为是最好的，因为您的服务器端和客户端脚本是完全分开的。
优点
更好的层间分离 - 如果明天您停止使用 PHP，并希望转移到 servlet、REST API 或其他服务，您不必更改很多 JavaScript 代码。 更具可读性 - JavaScript 是 JavaScript，PHP 是 PHP。如果不将两者混合，您可以获得两种语言的可读性更高的代码。 允许异步数据传输 - 从 PHP 获取信息可能会耗费时间/资源。有时您只是不想等待信息、加载页面并随时获取信息。 数据不是直接在标记上找到的 - 这意味着您的标记不会包含任何其他数据，并且只有 JavaScript 可以看到它。缺点
延迟 - AJAX 创建 HTTP 请求，HTTP 请求通过网络承载，具有网络延迟。 状态 - 通过单独的 HTTP 请求获取的数据不会包含来自获取 HTML 文档的 HTTP 请求的任何信息。您可能需要此信息（例如，如果 HTML 文档是为响应表单提交而生成的），并且如果您需要，则必须以某种方式传输它。如果您已排除在页面中嵌入数据（如果您正在使用此技术，您有），那么这将限制您使用可能受竞争条件影响的 cookie/会话。实现示例
使用 AJAX，你需要两个页面，一个是 PHP 生成输出的地方，第二个是 JavaScript 获取该输出的地方：
get-data.php
/* 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.
index.php（或任何实际页面的名称）
<!-- 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。
更多阅读材料
Using XMLHttpRequest - MDN XMLHttpRequest object reference - MDN How do I return the response from an asynchronous call?2。将数据回显到页面某处，并使用 JavaScript 从 DOM 获取信息
这种方法不如 AJAX 可取，但它仍然有它的优点。从某种意义上说，PHP 和 JavaScript 之间仍然相对分开，JavaScript 中没有直接的 PHP。
优点
快速 - DOM 操作通常很快，您可以相对快速地存储和访问大量数据。缺点
潜在的无语义标记 - 通常情况下，您使用某种<input type=hidden> 来存储信息，因为从inputNode.value 中获取信息更容易，但这样做意味着您拥有HTML 中无意义的元素。 HTML 具有用于文档数据的 <meta> 元素，而 HTML 5 引入了 data-* 属性，用于专门用于使用可与特定元素关联的 JavaScript 读取的数据。
弄脏源代码 - PHP 生成的数据直接输出到 HTML 源代码，这意味着您获得了更大且不那么集中的 HTML 源代码。
更难获得结构化数据 - 结构化数据必须是有效的 HTML，否则您必须自己转义和转换字符串。
将 PHP 与您的数据逻辑紧密结合 - 因为 PHP 用于表示，所以您无法将两者完全分开。
实现示例
有了这个，我们的想法是创建某种不会向用户显示但对 JavaScript 可见的元素。
index.php
<!-- 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 -->
3。将数据直接回显到 JavaScript
这可能是最容易理解的。
优点
非常容易实现 - 只需很少的时间即可实现并理解。 不脏源 - 变量直接输出到 JavaScript，因此 DOM 不受影响。缺点
将 PHP 与您的数据逻辑紧密结合 - 因为 PHP 用于表示，所以您无法将两者完全分开。实现示例
实现相对简单：
<!-- snip -->
<script>
var data = <?php echo json_encode("42", JSON_HEX_TAG); ?>; // Don't forget the extra semicolon!
</script>
<!-- snip -->
祝你好运！
【讨论】：
"PHP 没有简单的 JavaScript 转义函数" —json_encode 有什么问题？
我不同意“高度不安全！！”和“结构化数据很难”。将数据编码为 JSON（毕竟是 JavaScript 对象表示法），然后就可以了！
在发出 AJAX 请求时，异步引入的显着开销和代码复杂性如何？在 JavaScript 轻量级网站上工作时 - 发出 AJAX 请求是乏味的，不是最佳实践。
@BenjaminGruenbaum — JS 无效 JSON 无关紧要。我想不出任何在作业右侧的 JavaScript 中无效的 JSON。
@SecondRikudo 在方法 3 中，该示例可以杀死网站。示例：<?php $output = '<!--<script>'; echo json_encode($output); ?>。有关详细信息，请参阅this question。解决方法：使用JSON_HEX_TAG转义<和>（需要PHP 5.3.0）。【参考方案16】：
-
将数据转换成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);
【讨论】：
【参考方案17】：<script>
var jsvar = <?php echo json_encode($PHPVar); ?>;
</script>
json_encode() 要求：
PHP 5.2.0 或更高版本$PHPVar 编码为 UTF-8、Unicode。
【讨论】：
你太棒了！一行代码的答案总是最好的！【参考方案18】：只需使用以下方法之一。
<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>
【讨论】：
这对现有答案有什么价值？ 保持简单直接。对于所有有大量时间深入解释的用户 简单更好 可能这是一个愚蠢的问题，但我对 PHP 世界绝对陌生。一旦我们在 .php 文件中编写了上述代码，我如何访问我的 JavaScript 文件或我的“index.html”文件中的“js_variable”？ @AnkitPrajapati 尝试通过检查文档就绪状态来访问它。使用以下脚本。document.onreadystatechange = () => if (document.readyState === 'complete') // document ready alert(js_variable) ;以上是关于如何将变量和数据从 PHP 传递到 JavaScript？的主要内容，如果未能解决你的问题，请参考以下文章
如何将变量从 PlayFramework 1.2.4 传递到 Javascript