使用Javascript显示数据库中存在的内容

Question

我遇到以下问题，并且会喜欢一些指向正确方向的指针。 把事情变得简单：

我从一张表格中获取信息，使用PHP，将其放入一个<select>标签中。 每当我点击其中一个选项（行）时，它应该在它旁边的单元格中加载/显示某些信息。如果我点击另一个选项，它应该显示不同的信息（从数据库加载）。

像这样：

点击某个类别，显示的信息。实际上我应该在第二个单元格上有另一个子类别，但我相信如果我能够解决这个第一步，那么它将会是将它应用到第二个/第三个单元格的问题。

更新： 我也在考虑在该单元格中使用一个框架，一个php文档，每当用户点击其中一个选项时就会重新加载。那也是可行的吗？

Answer 1

您应该对数据库执行ajax调用（当然是通过PHP）来获取已实现的数据并填充它。

$('#category').change(function(){ 
    $('#problem').load('/url-to-fetch?selected=' + $('#category').val()); 
}); 

上面的例子是使用jQuery（尽管你可以使用任何js库或普通的javascript来完成）。

的代码说，当曾经有在该类别的设定值的变化，做一个AJAX调用url-to-fetch通过在选定的值，然后显示在problem区域的细节（假设的问题是textarea的ID ）。

Answer 2

如果您不介意仅支持启用了JavaScript的客户端，那么您要寻找的是Ajax。用原始JavaScript来完成Ajax是完全可能的，但我强烈推荐使用类似jQuery，Prototype或Closure的库。

使用Ajax，您可以在用户选择一个选项（例如询问该选项的详细信息）时向服务器发送请求，然后使用调用的结果更新页面那部分的内容。

下面是使用jQuery的例子：http://jsbin.com/agipu4

...和一个使用原型：http://jsbin.com/abido3

...但同样，你可以用封或任何其他人同样的事情（或者，再次，直接使用原始JavaScript和XmlHTTPRequest对象和DOM方法）。

Answer 3

根据有多少选择或有多少数据，我认为你在这里有2-3种基本方法。

1）如果存在少量的选择/数据，请将所有可能的选择作为单独的div预加载到Problem和Solution单元中，但用css（display：none）隐藏它们。当用户在Category中选择一个选项时，取消隐藏相应的div。

2）上述第1项的变体，您可以将所有数据加载到某个JS数组中，然后在选择某个类别时将该数组的项目推入Problem和Solution。3）如果类别太多，可以使用AJAX调用来运行mySQL查询（通过PHP），并使用调用结果填充Problem和Solution单元格。

我希望这有帮助！