在这种情况下如何处理数据驱动的输入？答案

【问题标题】：How to handle data driven input in this case?在这种情况下如何处理数据驱动的输入？
【发布时间】：2013-11-08 03:58:43
【问题描述】：

我正在开发一个包含左右两个导航面板的小型网页。

leftNav：保存花名列表。

rigtNav：保存一堆与花朵对应的图像。

像这样 -

|'''''''''''''''|''''''''''''''''''''''''''''''''''''''|
|               |                      Pics of Flower1 |
|  |'''''''|    |       |'''''|           |'''''|      |
|  |flower1|    |       |  A  |           |  C  |      |
|               |       |.....|           |.....|      |
|  |'''''''|    |                                      |
|  |flower2|    |                                      |
|               |       |'''''|           |'''''|      |
|  |'''''''|    |       |  B  |           |  D  |      |
|  |flower3|    |       |.....|           |.....|      | 
|               |                                      |
|...............|......................................|

Demo

我的问题是 - 如果我必须将此页面设为数据驱动页面。从数据库获取的输入，从后端获取数据以渲染页面的有效方法是什么？

我正在考虑创建一个具有以下格式的 json 对象 -

var data = {
    "Lotus" : [ "a1.jpg", "a1.jpg", "a1.jpg", "a1.jpg"  ], 

    "Orchid" : [ "o1.jpg", "o1.jpg", "o1.jpg", "o1.jpg"  ], 

    "Tulip" : [ "t1.jpg", "t1.jpg", "t1.jpg", "t1.jpg"  ], 

    "Rose" : [ "r1.jpg", "r1.jpg", "r1.jpg", "r1.jpg"  ], 
};

这是一个好方法吗？谁能建议我更好的方法？

【问题讨论】：

我不确定我是否完全理解您的问题。您绝对可以为此使用服务器生成的 json，这可能是对后端的相当简单的 ajax 调用的结果。
我只是在尝试探索 json 之外的可能性。尝试了解使用它们的差异和复杂性（如果有的话）。
我建议使用 json ......但你总是可以使用 xml，它在数据大小方面有点重。还有一个非常糟糕的选择是从服务器获取完全呈现的 html。但这是非常不可取的

标签： javascript jquery html css json

【解决方案1】：

JSON 的思维方式是构建一个稍微复杂一点的对象，其属性准确地描述了每个事物是什么。下面我们有一个对象数组：

var data = [
  {
    "name": "Lotus",
    "images": [ "a1.jpg", "a1.jpg", "a1.jpg", "a1.jpg"  ]
  },
  {
    "name": "Orchid",
    "images": [ "o1.jpg", "o1.jpg", "o1.jpg", "o1.jpg"  ]
  }
];

您可以循环访问此数组并获取data[0].name 和data[0].images[1] 的信息。

【讨论】：

完美...但只是想超越json，是否有任何其他数据结构支持我们可以取得更好的结果？我要问的是，通过 json 发送数据是处理数据驱动网站的最有效方式吗？还是因为它易于实现而更受欢迎？
JSON 紧凑、高效、易于阅读和参考。 XML 是另一个不太受欢迎的选项。使用哪一个最终取决于您。
有道理。感谢您的投入！