JSON 从 PHP 到 JavaScript答案

【问题标题】：JSON from PHP to JavaScriptJSON 从 PHP 到 JavaScript
【发布时间】：2011-06-22 12:56:29
【问题描述】：

一个稍微不同的问题，all the others 在那里......我可以使用 jQuery.ajax() 方法轻松地将 JSON 从 PHP 页面传递到 JavaScript，但这是我的情况：

我在 MySQL 中有一组联系人数据，每个数据都有名字、姓氏、lat、lng。我创建了一个页面，其中一半以表格格式显示联系人数据（名字、姓氏）。在另一半，我有一个谷歌地图，其中填充了来自数据集的标记（lat、lng）。现在，为了让两半共享同一个数据集，有两种方法，但我都不满意：

在 PHP 文件中，从 MySQL 中提取数据，使用该表的数据集，然后将该数据转换为 JSON，将其写入 JavaScript 变量并使用该变量填充 Google 地图。不喜欢这样做，因为有数百个数据点，这意味着 JSON 字符串非常大并且使页面膨胀，并且源中的所有数据都以人类可读的形式存在（我知道数据无论如何都在那里在所有情况下，它都在客户端，在这里更明显）。
在 PHP 文件中，从 MySQL 中提取数据，为表使用该数据集，然后在我的 JavaScript 中，通过 jQuery.ajax() 对另一个生成 JSON 数据的 PHP 文件进行 AJAX 调用。讨厌这样，因为它会导致对同一个数据源的两次调用。

我确定我在这里遗漏了一些明显的东西，任何指针/帮助？

编辑：根据上面的选项#1，我很清楚如何将 JSON 从 PHP 回显到 JavaScript...只是对这两种解决方案都不满意（即 JSON 在源中，或者 JSON 实际上是对数据的第二次调用来源）。

【问题讨论】：

你目前是怎么做的？为什么不用 JavaScript 建表呢？在页面加载时，进行 Ajax 调用、获取数据、构建表格、显示点。根据数据的大小，您可能仍然希望使用分页。还是一次性显示表格中的所有数据？
为什么不用json数据建表和地图呢？使用 jQuery 会非常简单，但使用纯 javascript 也可以。
您可以对 JSON 进行一次 Ajax 调用，并使用它来生成表格和地图。或使用 javascript 遍历表格并从那里获取地图信息
曾考虑过这一点，但我们有一个自定义的 PHP 驱动的“表格”小部件，我们正在使用它支持分页、过滤、排序等。希望不必重新编写JS 中的东西。
这个小部件也适用于 Ajax？

标签： php javascript json

【解决方案1】：

最好的办法是在 mysql 服务器上启用缓存并进行两次相同的调用：

http://www.petefreitag.com/item/390.cfm

如果没有 a) 对数据库进行两次调用或 b) 将结果存储在 .txt 文件（或类似文件）中并通过 ajax 检索，您就无法真正将数据放在两个不同的地方。

我想你可以这样做 b) 但它看起来有点草率，并且可能会比简单地进行 2 个 DB 调用产生更多的开销。

【讨论】：

我确实在缓存选择，所以这可能是一个选项。我认为您的意思是说“我想您可以做 a)...”，就将数据也写出源而言，对吗？
不，我的意思是，我认为 a) 是 IMO 的最佳选择，但 b) 如果您严格限制自己进行一次 DB 调用而不将结果打印到页面，这也是一种选择。

【解决方案2】：

您的要求自相矛盾：

您的数据在表格中是人类可读的形式，但您反对通过 JSON 发送它，因为它是“人类可读的形式 [...]”
该表非常臃肿，包含所有 tds、trs，但您介意通过 JSON 发送相同的数据（它可能会占用更少的空间）。

尽管如此，如果您真的反对 JSON 并且不介意表格，您可以从表格中提取数据（无论如何发送）。相当愚蠢，但这里有：

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script>
<table id='test'>
    <tr>
        <td>John</td><td>Smith</td>
        <td>354.3</td><td>52.5</td>
    </tr>
    <tr>
        <td>Adam</td><td>Dreger</td>
        <td>12.3</td><td>  52      </td>
    </tr>
    <tr>
        <td>Filip</td><td>Smith</td>
        <td>354.3</td><td>7.5</td>
    </tr>
</table>
<script>
    var data = $("#test tr").map(function(){
        return [$("td", this).map(function(){
            return this.innerHTML.match(/^\s*\d+(.\d+)?\s*$/)? 
                parseFloat(this.innerHTML) : this.innerHTML;
        }).toArray()]
    })
</script>

这是著名的视图控制器模型模式，其中视图由控制器查询以收集用作模型的数据；-)

一个更好的主意（但您反对发送 JSON）是使用 JSON 发送数据，并使用 Javascript 生成表。这样，您仍然可以清楚地区分模型和视图。这并不是真正的宗教问题，但如果您决定，例如，向显示的数据添加一些跨度，您将不必解析它。

那里有很多合理的插件可以帮助您将数据转换为表格，但您可能会侥幸成功：

<div id='another'>
 - - -
</div>
<script>
    // I assume that data is an array of arrays
    $('#another').html(
        [
        '<table border="1">',
        $(data).map(function(){
            return ['<tr>',
            $(this).map(function(){return "<td>" + this + "</td>"}).toArray().join("")
            ,'</tr>']
        }).toArray().join(""),
        '</table>'
        ].join("")
    );

</script>

（注意：上面的两个 sn-ps 可以链接并导致第一个表的重复：有趣！）

编辑：

即使是未显示在表格中的数据也可以放在那里（例如，在不可见的跨度中），并且使用一些琐碎的编码（例如 rot13）使临时复制/粘贴无法访问（未包含在答案中，但可以广泛使用） .像这样：

    <style>.secret {display: none}</style>

    <tr>
        <td>Adam</td><td>Dreger</td>
        <td>12.3</td><td>  52  </td>
            <td><span class='secret'>({frperg:"ovt bar"})</span></td>
    </tr>

在代码中：

<script>
    var data = $("#test tr").map(function(){
        return [$("td", this).map(function(){
            return this.innerHTML.match(/^\s*\d+(.\d+)?\s*$/)? 
                parseFloat(this.innerHTML) : this.innerHTML;
        }).toArray(), 

            eval($(".secret", this).html().rot13())]
    })
</script>

【讨论】：

我已经隐藏了一些细节...... Google 地图将使用该表不会使用的许多其他字段，例如街道地址和其他类似信息。这些数据不会出现在表格中，我想将其保留在源代码之外，以阻止有人通过简单的复制/过去操作来获取所有数据。
正如我在上面的 cmets 中提到的，我正在使用现有的基于 PHP 的表实现，包括分页、过滤、排序等，并希望避免在客户端重新创建此功能。当然不反对，我同意，这可能是最好的解决方案，但我在这里的工作受到一些限制。
@Paul：坦率地说，“少数约束”本身就是逻辑。您不能发送数据，但也不能发送。让它可见，但又不可见。 JSON 服务将更容易复制/粘贴，而且保护起来也相当繁琐。无论如何，您可以将任何数据添加到表中，甚至是未显示的数据 - 所以这不是问题。我将编辑答案。
+1 是的，试图两全其美，但正如您所提到的，这是不可能的，必须选择其中一个。由于我现在坚持使用 PHP 表生成器，我将不得不进行两个单独的调用，然后在接下来的几周内，考虑过渡到 JS 表。
@Paul：嗯，从表中读取数据并不是真的那么糟糕......有时你必须为了“workshereandnowness”而牺牲“niceness” :) 谢谢。

【解决方案3】：

这取决于数据集有多大。如果它是一个大负载，您可能希望将其作为外部文件（即发出 ajax 请求）获取，以便让浏览器缓存它。但是，在大多数情况下，尽可能减少 HTTP 请求的数量。就我个人而言，我会将 json 嵌入到 HTML 中，除非压缩后可能 >20 kb。

【讨论】：

【解决方案4】：

我会使用#2 的变体。是的，通过 AJAX 获取 JSON，因为这将使页面加载速度更快，也将更加灵活——也许在将来的某个时候，您可能希望能够在没有表格的情况下显示地图，或者类似的东西。

但是添加一个 PHP class 来包装对数据源的调用，并由生成 HTML 的页面和生成 JSON 的页面使用。这样可以更轻松地缓存查询结果，并消除重复代码。

【讨论】：

所以本质上是这样的：从 PHP 调用数据源，将生成的 MySQL 结果存储在 memcached 中，然后在侦听 Ajax 调用的 PHP 页面中，检查 memcached 是否有相同的结果，如果没有找到, 重新运行查询？
是的，这似乎是正确的，但如果对两种类型的演示文稿共有的数据进行格式化或其他操作，您会希望缓存该操作的结果而不是缓存原始的 mySQL 结果。

【解决方案5】：

不错的选择，我总是以 JSON 格式将数据传递给客户端，使用此命令

<?php
$arr = array('a' => 1, 'b' => 2, 'c' => 3, 'd' => 4, 'e' => 5);

echo json_encode($arr);
?>

就这么简单，打印输出并像在客户端的任何其他 Javascript 对象一样遍历它;)

【讨论】：

你读过第一句话吗？ "我可以使用jQuery.ajax() 方法轻松地将 JSON 从 PHP 页面传递到 JavaScript"。他知道该怎么做。
我知道该怎么做，正如问题所示，我只是不喜欢以这种方式在页面源中公开整个 JSON 数组，因为 JSON 数组将有很多条目（数千）。
使用 JSON 填充表格和地图，这是最快最简单的方法，如果不需要，请不要进行 2 次 http 调用
该表是在服务器端生成的，我如何为两者使用相同的 JSON 而不会遇到将完整的大型 JSON 数组写入 HTML 源的问题 1？
好吧，这有点令人困惑，因为 jQuery.ajax() 是一种客户端方法，它不用于从 php 传递任何东西......我在想，如果谷歌地图会填充客户端，然后无论如何都必须发送数据脚本。我真的认为发出 2 个 http 请求没有必要或有帮助