对于我的特殊情况，将数据从 PHP 传递到 JavaScript 的最佳方式答案

【问题标题】：Best way to pass data from PHP to JavaScript for my particular case对于我的特殊情况，将数据从 PHP 传递到 JavaScript 的最佳方式
【发布时间】：2012-02-26 13:31:33
【问题描述】：

我在 Drupal 中建立了一个在线社区，其主页有点像 Facebook 墙。您会看到 25 个最近的帖子，其中两个最新的 cmets 在这些帖子下方。这些 cmets 正下方还有一个文本区域，以便您可以快速对特定帖子发表新评论。

这些 Facebook 风格的帖子通过 JavaScript 内置了很多功能。单击帖子正下方的“查看所有 cmets”链接会进行 AJAX 调用，该调用会获取该帖子的所有 cmets 并将它们显示在其正下方。您还可以将帖子标记为有用，作为您问题的解决方案，内联编辑 cmets 等。所有这些操作都需要 AJAX 请求，这意味着发出请求的 JavaScript 需要知道基本信息，例如节点 ID（唯一帖子的标识符）、评论 ID（评论的唯一标识符）等。

我最初的实现将这些基本数据散布在所有帖子中，这使得编写需要找到它的 JS 变得更加复杂。所以我的第二个实现只是将所有这些数据输出到每个帖子的主要包装元素中的 JSON 兼容字符串中。虽然这让 JS 更容易找到它需要的数据，但将 JSON 写成字符串是一件很痛苦的事情（转义引号，没有换行符）。

所以现在我有了第三个想法，并且在实施之前我正在寻找有关它的反馈。这个想法是为所有这些帖子创建一个单一的全局 JS 数组，其中包含保存每个帖子数据的对象。该数组中的每个元素都将保存 AJAX 调用所需的必要数据。所以它看起来像这样：

Facebook 风格的帖子模板

<div class="post" data-postindex="<?php echo $post->index; ?>">
    <!-- lots of other HTML for the post -->
</div>
<script type="text/javascript">
    globalPostArray.push({
        nid: <?php echo $post->nid; ?>,
        authorID: <?php $post->authorID; ?>,
        //etc. etc. etc.
    });
</script>

上述代码的结果是，当点击需要 AJAX 请求的链接时，JS 会简单地从该链接向上遍历 DOM，直到找到主要的 .post 元素。然后它会获取data-postindex 的值，以便知道globalPostArray 中的哪个元素拥有它需要的数据。

想法？我觉得必须有一些标准的、被接受的方式来完成这样的事情。

【问题讨论】：

为什么 JSON 作为字符串很痛苦？你不使用json_encode函数吗？
不，我没有使用它。这就是为什么它很痛苦。显然我是个白痴:)

标签： php javascript ajax

【解决方案1】：

我从未听说过在 PHP 和 Javascript 之间“传递”信息的标准方法，因为它们分别是服务器端和客户端语言。我个人会使用您的第二个和第三个解决方案的混合体。

将帖子 id 存储在 data-postindex 属性中（数据属性是新的，并且是存储少量数据的“正确”方式）。但我仍然会只使用 JSON 数组，因为在数据属性中存储大量数据（并转义它们！）可能会出现问题。 PHP 有一个 json_encode 函数，可以为您处理所有转义等问题 - 只需像往常一样构建一个 PHP 数组（例如，$postdata），然后将其放入您的帖子模板中：

<script type="text/javascript">
    globalPostArray.push(<?php echo json_encode($postdata) ?>);
</script>

$postdata 类似于以下内容：

$postdata = array(
    'nid' => 5,
    'authorId' => 45
    ...etc...
);

从现有代码生成这样一个数组应该很容易。

我不久前写了一封blog post 来介绍我对这种事情的实现，但听起来你只需要一个指向json_encode 的指针。

【讨论】：

json_encode。呃。奖励您首先发布的答案，以及比仅提及 json_encode 更进一步。

【解决方案2】：

我会将数据存储在元素内：

<div class="post" data-postindex="<?php echo $post->index; ?>" 
                  data-nid="<?php echo $post->nid; ?>"
                  data-authorID="<?php echo $post->authorID; ?>">

...或将完整的 JSON 字符串存储在 1 个数据属性中：

<div data-data="<?php echo htmlentities(json_encode($somedata));?>">

【讨论】：

这是我最初的解决方案，但由于数据量大，它开始变得笨拙。
好的，当您必须自己实现数据处理时，这可能是正确的。但是例如，当使用带有内置数据方法的 jQuery 时，您将没有任何缺点，但 IMO 数据绑定到元素的好处。
它需要很多额外的代码（而不是仅仅使用 json_encode 并将其直接传递到你的 JavaScript 中）。
不，它没有。您可以在 data-attribute 中存储一个完整的 JSON 字符串，这并不难处理。 演示：jsfiddle.net/doktormolle/edZus
对，我指的是您在帖子中提出的方式，它建议分割 PHP 对象以便将单个值插入到数据属性中。关于将数据绑定到元素的“好处”，我最终使用数据来构建 JS 对象的实例，这些对象是我的应用程序用来操作的真实对象。因此，数据和 HTML 元素都与这些对象绑定在一起，从而无需将数据绑定到元素本身。当然，这只是针对我的具体情况。

【解决方案3】：

将任何 PHP 变量传递给 JavaScript 的最可靠方法是 json_encode。

<script type="text/javascript">
    var something = <?php echo json_encode($var); ?>;
</script>

你不能通过闭包和资源，否则任何东西都可以通过。

【讨论】：

【解决方案4】：

我的回答和其他人差不多，但更详细。我通常这样做，我认为这是最好的方法：（当然你可以使用 ajax 抓取数据，但取决于上下文）

somefile.html

  <html>
     <head>..</head>
     <body>
        html code
        <script>
            window.my_data = <?php echo json_encode($my_php_var); ?>
       </script>
     </body>
  </html>

somefile.js

       $(function() {
          window.myitem = new myClass(window.my_data);
       });
       var MyClass = function(init_data) {...}

【讨论】：