实际上有几种方法可以实现这一点。有些方法需要比其他方法更多的开销，而有些方法被认为比其他方法更好。
不分先后顺序：
-
使用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>
fetch("get-data.php")
.then((response) => {
if(!response.ok){ // Before parsing (i.e. decoding) the JSON data,
// check for any errors.
// In case of an error, throw.
throw new Error("Something went wrong!");
}
return response.json(); // Parse the JSON data.
})
.then((data) => {
// This is where you handle what to do with the response.
alert(data); // Will alert: 42
})
.catch((error) => {
// This is where you handle errors.
});
</script>
<!-- snip -->
上述两个文件的组合将 42 在文件加载完成时发出警报。
更多阅读材料
-
使用 Fetch API
-
如何返回异步调用的响应？
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 可见的元素。
索引.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 -->
祝你好运！
