使用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單元格。

我希望這有幫助！