PHP json 到 HTML 文件中的 JavaScript 变量答案

【问题标题】：PHP json to a JavaScript variable inside an HTML filePHP json 到 HTML 文件中的 JavaScript 变量
【发布时间】：2021-02-18 19:28:54
【问题描述】：

我编写了以下脚本，为当前文件夹下的所有图像创建了一个漂亮的 JSON：

<?php
header('Content-type: application/json');

$output = new stdClass();
$pattern="/^.*\.(jpg|jpeg|png|gif)$/i"; //valid image extensions

$dirs = array_filter(glob('*'), 'is_dir');
foreach ($dirs as $dirname) {
  $files = glob(''.$dirname.'/*');
  $images = preg_grep($pattern, $files);
  
  $output->{$dirname} = $images;
}

echo json_encode($output, JSON_PRETTY_PRINT);
?>

我有一个带有基本页面的 HTML 文件，我想在一些 javascript 操作后以格式化的方式显示 JSON 的数据。

所以问题是如何将 PHP 数据放入 javascript 变量中？

<html>
    ...
    <body>
        <script src="images.php"></script>
        <script type="text/javascript">
            // Desired: Get access to JSON $output
        </script>

        ...

        <div>
          <img ... >
        </div>

    </body>
</html>

我试图把两个https://stackoverflow.com/a/61212271/1692261 和 https://stackoverflow.com/a/50801851/1692261 在该脚本标签内，但它们都不起作用，所以我猜我在这里遗漏了一些基本的东西（我第一次使用 PHP :)

【问题讨论】：

为什么不想对 PHP 脚本进行 ajax 调用并获取 json？
@Zeusarm 好吧...第一次使用PHP，对ajax一无所知。这是使它工作的唯一方法吗？如果是这样，我也会读到这一点。经典牦牛剃须:)
如果您想在 javascript 变量中“分配”php 输出，您必须处理引号等。如果您通过 javascript ajax 请求在客户端加载它并从 php 获取 json，那么您就是获取可以轻松使用的纯 javascript 对象。
@Zeusarm 好的，我会试试看的。
@Zeusarm 就像一个魅力！请参阅下面的答案。谢谢！

标签： javascript php html json

【解决方案1】：

您应该专注于需要做的事情，但目前您正在尝试实施自己的想法。也许你应该改变你的方法并以另一种方式做你想做的事？将 php 变量传递给 js 是可能的。但是你为什么需要这个json？如果您想使用它来生成 html（f.e 向用户显示图像），您可以在没有 js 的纯 php 上进行操作。如果您完全需要 json，您可以使用 php 生成 json 文件，并通过额外的 js 请求获取此文件。但最简单的方法是

// below php code that generates json with images
$images = json_encode($output, JSON_PRETTY_PRINT);
...
// php code but in html template
<script type="text/javascript">
   var images = "<?= $images ?>";
</script>

我不能保证这条 js 行会正常工作，但你明白了）

P.S 你不需要使用 stdClass 来达到这样的目的。我们通过数组来实现（在你的情况下它将是关联数组），数组在 php 中非常强大。 json_encode() 将从数组或对象生成相同的 json。但如果这部分代码运行良好，就让它保持原样

【讨论】：

它不起作用。我尝试了console.log(images)，但它只打印<?= $images ?>。无论如何，您的前缀是完全正确的。请参阅我发布的这个问题的答案。谢谢！

【解决方案2】：

我接受了@Zeusarm 的建议，只使用了 ajax（和 jquery）。

供其他人需要参考：

原帖中的 PHP 脚本没有任何变化。
使用<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> 将 jquery 添加到 HTML 文件中
发出这样的 GET 请求：

        <script type="text/javascript">
          var images = ''
          $.get('images.php',function (jsondata) {
            images = jsondata
          });

我确信这不是最干净的代码，但它可以工作:)

【讨论】：

最好将ajax调用移动到脚本中$(document).ready(function () { ... })函数体。它会在 HTML 加载完成后执行代码，如果在 script 标签之后初始化一些元素，你不会有任何问题。
知道了。完成:)