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

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

leftNav：保存花名列表

rigtNav：保存一束与花对应的图像

像这样-

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

我的问题是——如果我必须让它成为一个数据驱动的页面。要从数据库获取输入，从后端获取数据以呈现页面的有效方法是什么

我正在考虑使用以下格式创建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的思维方式是构建一个稍微复杂一点的对象，其属性准确地描述了每件事情是什么。下面是一组对象：

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

---

您可以循环使用此数组并获取信息，如

数据[0]。名称
和
数据[0]。图像[1]
我不确定是否完全理解您的问题。您完全可以使用服务器生成的json来实现这一点，这可能是对后端进行相当简单的ajax调用的结果。我建议使用json…但您可以始终使用xml，因为xml在数据大小方面稍重一些。还有一个非常糟糕的选择，就是从服务器获取完全呈现的html。但这是非常不可取的完美。。。但是，除了json，还有其他数据结构可以支持我们获得更好的结果吗？我想问的是，通过json发送数据是处理数据驱动网站的最有效方式吗？还是因为它易于实现而更受欢迎？JSON紧凑、高效、易于阅读和引用。XML是另一个不太流行的选项。你用哪一个最终取决于你自己，这是有道理的。感谢您的投入！