实际上有几种方法可以做到这一点。有些需要比其他的开销更多，有些被认为比其他的更好。
排名不分先后：
- 使用 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获取输出的地方：
获取数据.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
更多阅读材料
2. 将数据回显到页面的某个地方，并使用 JavaScript 从 DOM 获取信息
此方法不如 AJAX 更可取，但它仍然有其优点。PHP和JavaScript之间仍然相对分开，从某种意义上说，JavaScript中没有直接的PHP。
优点
-
快速 - DOM 操作通常很快，您可以相对快速地存储和访问大量数据。
缺点
-
潜在的非语义标记 - 通常，发生的事情是你使用某种来存储信息，因为它更容易从 中获取信息，但这样做意味着你在HTML中有一个无意义的元素。HTML具有用于文档数据的元素，HTML 5引入了专门用于使用JavaScript读取的数据的属性，这些属性可以与特定元素相关联。
<input type=hidden>inputNode.value<meta>data-*
-
弄脏源代码 - PHP生成的数据直接输出到HTML源代码，这意味着您将获得更大，更不集中的HTML源代码。
-
更难获得结构化数据 - 结构化数据必须是有效的HTML，否则您必须自己转义和转换字符串。
-
将 PHP 与数据逻辑紧密耦合 - 由于 PHP 用于表示，因此无法将两者完全分开。
实现示例
有了这个，我们的想法是创建某种元素，这些元素不会向用户显示，但对JavaScript是可见的。
索引.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 -->
祝你好运！
