使用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的特定类..！这些会让事情变得更容易。