使用 MySQL、PHP/JavaScript/Ajax/jQuery 的链接下拉列表

Posted 2023-02-24

【中文标题】使用 MySQL、PHP/JavaScript/Ajax/jQuery 的链接下拉列表

【英文标题】：Linked pulldown lists using MySQL, PHP/JavaScript/Ajax/jQuery

【发布时间】：2010-12-30 18:20:26

【问题描述】：

我是 Web 开发的新手，我的任务是开发一个 Web 应用程序，该应用程序基本上会在一个页面上向用户显示 5-15 个下拉列表，其中每个选择都会限制所有其他列表中的选择。用户应该能够从任何一个列表开始（因此没有设置选择顺序），当用户在每个列表中选择了某些内容或所有参数被先前的选择锁定时，用户必须按下 GO 按钮并进行一些计算将发生，呈现一个数据库选择。基本上它是一个多参数产品选择器应用程序。

列表之间的关系并不简单，可能需要计算字段等，一个列表可能会影响其他几个列表的内容。后面的数据库将是 mysql，可能是一个大表，可能有 30 个字段和 500-5000 行。除非你有充分的理由不这样做，否则我将使用 php、javascript 和 AJAX。

我做了一些研究，发现了三种方法：

将所有数据发送到浏览器并使用Javascript处理过滤等客户端。

每次选择后将参数发送回服务器，并在每次选择后重新加载整个表单。可能是少量的 Javascript 和 PHP 中的大多数代码。

使用 AJAX 动态更改所有列表内容，而无需重新加载整个表单。

由于我对这方面很陌生，我很难说出要走哪条路，有什么陷阱等等......

我有一些顾虑：

A.初始加载缓慢。 #1 最差？

B.动态响应慢。 #2 最差？

C.复杂的编程。 #3 最差？

D.不同浏览器和平台的兼容性问题。不知道哪种方法最有可能产生问题...如果我使用一些框架会更好？

E.我什至可以尝试为关闭 javascript 的人做一些至少部分工作吗？ （比如选择新页面上的每个列表并且每次都必须按 GO 按钮）？ （我想我可以告诉我的用户他们必须有 Javascript，所以没什么大问题......）也许 #2 在这里最好？

F。我认为“免费选择顺序”的规范意味着我必须首先下载大部分数据库，所以也许我应该尽量避免该选项......如果我保留它，我不妨使用方法＃1，或者？ ??

G.最好在 SQL 中尽可能多地进行选择/过滤，以通过构建自定义 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 下午

【参考方案1】：

jquery 是一种简单的使用方式...您还可以尝试一个名为 xajax 的特定类...！这些会让事情变得更容易。

【参考方案2】：

将所有数据发送到浏览器并处理过滤等客户端 使用 Javascript。

您提到您的表可能有 30 列和 500-5000 行？在这种情况下，在页面加载时发送这么多数据不是一个好主意：1. 这会使页面加载速度变慢；2. 可能会使浏览器挂起（想想 IE）。

每次选择后将参数发送回服务器并重新加载 每次选择后的整个表格。 可能是一个小小的 Javascript 和 PHP 中的大部分代码。

我不确定这与第三种方法有何不同，但可能您的意思是您需要重新加载页面？在这种情况下，如果每次更改下拉选择时都需要等待页面刷新，这不太可能是良好的用户体验。

使用 AJAX 更改所有列表内容 动态而不重新加载 整个表格。

从用户的角度来看，这是迄今为止最好的方法，因为它使填写表单变得简单。从您的最终实现可能会稍微困难一些，但是您可能需要对每个解决方案执行相同的计算 - 不妨将它们移动到可由 AJAX 调用以检索您的数据的单独页面。正如其他人所提到的，将 jQuery 用于所有 JavaScript/AJAX 内容将使事情变得容易得多；)

【讨论】：

感谢詹姆斯的全面回答！大多数人似乎建议使用 AJAX + 框架。我想我必须付出努力......关于它的另一个负面因素是它基本上排除了为没有 Javascript 的人提供后备解决方案，或者？对于框架，jQuery 是这类应用程序的好/最佳选择，还是我应该考虑 YUI、MooTools 等具有更多功能但似乎更难使用/学习的？

【参考方案3】：

我个人的建议是使用 AJAX。

原始 SQL 与否实际上是您使用什么后端的问题。

您需要能够设置不同选择之间的关系。列表的人口必须能够与您的后端进行通信。

这里真正的问题是如何实现选择之间的关系。我在这里没有好的答案，这在很大程度上取决于后端和您的管理需求。它可以用 PHP 硬编码或通过 XML 或通过管理界面进行配置，并持久保存到您的数据库解决方案中。

使其完全可定制并非易事。

我建议使用 AJAX 的原因基本上是因为您需要过滤任何选择中的任何更改。这意味着要么下载大量未使用的信息，要么大量刷新页面。使用 ajax 给用户带来一路顺畅的体验。

【讨论】：

感谢 Peter 进一步确认使用 AJAX！不确定我是否完全理解您的回答....

【参考方案4】：

我绝对推荐将 AJAX 与 jQuery 一起使用，它在所有主要浏览器中都经过测试，并且调用简单，可以更快地编写代码，并且不会遇到普通 JavaScript 的浏览器兼容性问题。

【讨论】：

谢谢斯科特！你有没有看过更多关于使用 jQuery 的类似教程？