使用MySQL，PHP/JavaScript/Ajax/jQuery的鏈接下拉列表

Question

我對web開發很陌生，有一個任務來開發一個Web應用程序，它將基本顯示用戶5-15在一個頁面上下拉列表，其中每個選擇將限制所有其他列表中的選擇。用戶應該能夠從任何一個列表開始（所以沒有設置選擇順序），並且當用戶已經在每個列表中選擇了某些內容或者所有參數被之前的選擇鎖定時，用戶必須按下GO按鈕並且一些計算將發生，提出數據庫選擇。基本上它是一個多參數產品選擇器應用程序。

列表之間的關係並不簡單，可能需要計算字段等，一個列表可能會影響其他幾個內容。後面的數據庫將是MYSQL，可能是一個大型表格，可能有30個字段和500-5000行。我將使用PHP，JavaScript和AJAX，除非你有充分的理由不這樣做。

我已經做了一些研究，發現三種方式來做到這一點：

1. 所有數據發送到瀏覽器的JavaScript處理過濾等客戶端。

2. 每次選擇後將參數發送回服務器，並在每次選擇後重新加載整個表單。可能是一個littebit Javascript和PHP中的大多數代碼。

3. 使用AJAX動態更改所有列表內容，而無需重新加載整個表單。

因爲我很新的這我很難報時哪個方向走，有什麼陷阱還有等等

我有一些conserns：

A.緩慢的初始加載。最糟糕的是＃1？ B.動態響應緩慢。 ＃2最差？

C.複雜的編程。 ＃3的最差？

D.不同瀏覽器和平臺的兼容性問題。不知道哪種方法最有可能造成問題......如果我使用某種框架，會更好嗎？

E.我甚至可以嘗試使JavaScript至關重要的人至少有部分工作嗎？ （比如在新頁面上選擇每個列表並且每次都按下GO按鈕）？ （我想我可以告訴我的用戶他們必須有Javascript，所以沒有大問題....）也許＃2在這裏最好？我認爲「自由選擇順序」的規範意味着我必須首先下載大部分的數據庫，所以也許我應該儘量避免這種選擇.....如果我保留它，我不如使用方法＃1，或？

G.這將是最好做到儘可能在SQL selction /過濾通過建立自定義的SQL代碼，讓未來的擴展，所以，給出了一個很大的負向＃1 ...

^h 。其他陷阱等？

我已經找到所有三種方法的教程等，但如果你可以指向這樣的好資源，我將不勝感激，尤其是我不基於我的代碼不是智能/良好/兼容的例子....

1： http://www.bobbyvandersluis.com/articles/unobtrusivedynamicselect.php http://javascript.about.com/library/bl3drop.htm http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_20523133.html

2： http://www.plus2net.com/php_tutorial/php_drop_down_list.php http://www.plus2net.com/php_tutorial/php_drop_down_list3.php

3： http://techinitiatives.blogspot.com/2007/01/dynamic-dropdown-list-using-ajax_29.html http://www.webmonkey.com/tutorial/Build_an_Ajax_Dropdown_Menu http://www.noboxmedia.com/massive-ajax-countryarea-drop-down-list/ http://freeajaxscripts.net/tutorials/Tutorials/ajax/view/Create_AJAX_Dynamic_Drop_Down_List_using_PHP_-_xajax.html

3 + jQuery的： http://remysharp.com/2007/01/20/auto-populating-select-boxes-using-jquery-ajax/

我們的問題是：任何人都可以在經歷所有這些方法幫助我一下，用上述方法1-3的評價，所以我可以選擇一個，右邊上手跟蹤？另外，我會通過學習/取消一個像jQuery + jSON這樣的框架來幫助嗎？

RGDS PM

Answer 1

發送所有數據到瀏覽器並使用Javascript處理過濾等客戶端 。

你提到過你的表有30列和500-5000行可能嗎？在這種情況下，在頁面加載時發送大量數據並不是一個好主意：1.它會使頁面加載速度變慢並且2.可能導致瀏覽器掛起（認爲是IE）。

每次選擇後都會將參數發送回服務器，並在每次選擇後重新加載整個表格。 可能是一個littebit Javascript和 PHP中的大部分代碼。

我不確定這與第三種方法有什麼不同，但可能您的意思是說您需要重新加載頁面？在這種情況下，也不太可能是一個很好的用戶體驗，如果他們需要等待頁面刷新每一個下拉選擇改變時..

使用AJAX來改變所有列表內容 動態無需重新加載整個表格都是 。

從用戶的角度來看，這是迄今爲止最好的方法，因爲它使填寫表單變得簡單。也許稍微難以從你的最終實現，但你可能需要執行與每個解決方案相同的計算 - 也可以將它們移動到單獨的頁面，AJAX可以調用它來檢索數據。正如其他人所說，使用jQuery處理所有JavaScript/AJAX內容會讓事情變得更加簡單;）

Answer 2

我肯定會推薦使用AJAX使用jQuery它在所有的主流瀏覽器的測試，並具有簡單的通話，這將使它快了很多代碼，你會不會有瀏覽器的兼容性普通JavaScript的問題。

Answer 3

我個人的建議是使用AJAX。

原始SQL或不是真的是你使用的後端的問題。

您需要能夠設置不同選擇之間的關係。列表中的人口必須能夠與後端進行通信。

這裏真正的問題是如何實現選擇之間的關係。我在這裏沒有很好的答案，這很大程度上取決於後端和您的管理需求。它可以用PHP進行硬編碼，也可以通過XML或通過管理界面進行配置，並保存到數據庫解決方案中。

讓它完全可定製並非易事。

我建議使用AJAX的原因基本上是因爲您需要篩選任何選擇中的任何更改。這意味着要麼下載大量未使用的信息，要麼大量刷新頁面。與ajax一起爲用戶提供一路暢通的體驗。

Answer 4

jquery是一種使用simula的方法...您也可以嘗試一個名爲xajax的特定類..！這些會讓事情變得更容易。