JSON 从 PHP 到 JavaScript

Question

一个稍微不同的问题全部 其他...我可以使用以下命令轻松地将 JSON 从 PHP 页面传递到 JavaScript jQuery.ajax() 方法，但这是我的情况：

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

1. 在 PHP 文件中，从 MySQL 中提取数据，将该数据集用于表，然后转换该数据转换为 JSON，将其写入 JavaScript 变量并使用该变量填充 Google 地图。不喜欢这样做，因为有数百个数据点，这意味着 JSON 字符串非常大并且使页面膨胀，并且源中的所有数据都以人类可读的形式存在（我知道无论如何数据都在那里）在所有情况下，它都在客户端，在这里更明显）。

2. 在 PHP 文件中，从 MySQL 中提取数据，将该数据集用于表，然后在我的 JavaScript 中，通过 jQuery.ajax() 对另一个生成的 PHP 文件进行 AJAX 调用JSON 数据。讨厌这个，因为它会导致对同一数据源的两次调用。

我确信我在这里遗漏了一些明显的东西，有什么指示/帮助吗？

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

Answer 1

最好的选择是在 mysql 服务器上启用缓存并进行两个相同的调用：

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

如果没有 a) 对数据库进行两次调用或 b) 将结果存储在 .txt 文件（或类似文件）中，并且通过ajax检索它。

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

Answer 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>

注意：上面的两个片段可以链接起来并导致重复第一个表格：有趣！）

编辑：< /strong>

即使没有在表中显示的数据也可以放在那里（例如，在不可见的范围内），并且使用一些简单的编码（例如 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>

Answer 3

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

Answer 4

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

但是添加一个 PHP 类 来包装对数据源的调用并由生成 HTML 的页面和生成 JSON 的页面。这将使缓存查询结果变得更加容易，并消除重复的代码。

Answer 5

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

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

echo json_encode($arr);
?>

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