I am quite new to web development and have a task to develop a web application that will basically show the user 5-15 pull down lists on one page, where each selection will limit the choices in all other lists. The user should be able to start with any one of the lists (so no set selection order) and when the user have selected something in each list or all parameters are otherwise locked by previous choices the user has to press the GO button and some calculations will take place, presenting a database selection. Basically it is a muliple parameter product selector application.
我是Web开发的新手,我的任务是开发一个Web应用程序,它基本上会在一个页面上显示用户5-15下拉列表,其中每个选项将限制所有其他列表中的选项。用户应该能够从任何一个列表开始(因此没有设置选择顺序),并且当用户在每个列表中选择了某些内容或者所有参数都被先前的选择锁定时,用户必须按下GO按钮并进行一些计算将进行,提供数据库选择。基本上它是一个多参数产品选择器应用程序。
The relations between the lists are not simple, and could need calculated fields etc, and one list could affect the content of several others. The database behind will be MYSQL, probably a single large table, with perhaps 30 fields and 500-5000 rows. I will be using PHP, JavaScript and perhaps AJAX unless you have a strong reason not to.
列表之间的关系并不简单,可能需要计算字段等,一个列表可能会影响其他几个列表的内容。后面的数据库将是MYSQL,可能是一个大型表,可能包含30个字段和500-5000行。我将使用PHP,JavaScript和AJAX,除非你有充分的理由不这样做。
I have done some research and found three ways to do this:
我做了一些研究,发现了三种方法:
-
Send all data to the browser and handle the filtering etc client side with Javascript.
将所有数据发送到浏览器并使用Javascript处理过滤等客户端。
-
Send parameters back to the server after each selection and reload the whole form after each selection. Probably a littebit Javascript and most code in PHP.
每次选择后将参数发送回服务器,并在每次选择后重新加载整个表单。可能是一个littebit Javascript和PHP中的大多数代码。
-
Use AJAX to change all list content dynamically without reloading the whole form.
使用AJAX动态更改所有列表内容,而无需重新加载整个表单。
Since I am so new to this I have a hard time telling which way to go, what pitfalls there are etc...
由于我对此很陌生,所以我很难说出去哪条路,有什么陷阱等等......
I have some conserns:
我有一些安慰:
A. Slow initial loading. Worst for #1?
A.初始加载缓慢。 #1最差?
B. Slow dynamic response. Worst for #2?
B.动态响应缓慢。最差#2?
C. Complicated programming. Worst for #3?
C.复杂的编程。最差#3?
D. Compatibility issues for different browsers and plattforms. Have no idea of which method is most likely to create problems...better if I use some Framework?
D.不同浏览器和平台的兼容性问题。不知道哪种方法最有可能产生问题...如果我使用某些框架会更好?
E. Could I even try to make something at least part-working for people with javascript turned off? (like selecting each list on a new page and having to press GO button each time)? (I think I can tell my users they must have Javascript on so no big issue....) Perhaps #2 is best here?
E.我是否可以尝试为关闭javascript的人创作至少部分工作? (比如在新页面上选择每个列表并且每次都必须按GO按钮)? (我想我可以告诉我的用户他们必须有Javascript,所以没有大问题....)也许#2最好在这里?
F. I think the specification of "free selection order" means I have to download most of the database initially, so perhaps I should try to avoid that option.....if I keep it I might as well use method #1, or???
F.我认为“*选择顺序”的规范意味着我必须最初下载大部分数据库,所以也许我应该尽量避免使用该选项.....如果我保留它,我不妨使用方法#1,要么???
G. It would be best to do as much as possible of the selction/filtering in SQL to allow future extensions by building custom SQL code, so that gives a big minus to #1...
G.最好尽可能多地使用SQL中的选择/过滤来通过构建自定义SQL代码来允许将来的扩展,这样就可以给#1带来很大的负面影响......
H. Other pitfalls etc???
H.其他陷阱等???
I have found tutorials etc for all three methods, but if you can point to good resources like this I would appreciate it, especially so I dont base my code on examples that are not smart/good/compatible....
我已经找到了所有这三种方法的教程等,但如果你能指出这样的好资源我会很感激,特别是所以我不会将我的代码基于不聪明/好/兼容的例子....
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
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
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: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/ large-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/
Now to the question: Could anyone experienced in all these methods help me out a bit, with the evaluation of methods 1-3 above so I can choose one and get started on the right track? Also, will I be helped by learning/unsing a framework like jQuery+jSON for this?
现在回答一个问题:所有这些方法都有经验可以帮助我一点,通过对上述方法1-3的评估,我可以选择一个并开始正确的方向吗?另外,我是否会通过学习/取消像jQuery + jSON这样的框架来帮助我?
Rgds PM
4 个解决方案
#1
1
Send all data to the browser and handle the filtering etc client side with Javascript.
将所有数据发送到浏览器并使用Javascript处理过滤等客户端。
You mentioned that your table has 30 columns and 500-5000 rows potentially? In that case it would not be a good idea to send that much data when the page loads as: 1. It will make the page slower to load and 2. It is likely to make the browser hang (think IE).
您提到您的表有30列,可能有500-5000行?在这种情况下,当页面加载时发送那么多数据不是一个好主意:1。它会使页面加载速度慢2.它可能会使浏览器挂起(想想IE)。
Send parameters back to the server after each selection and reload the whole form after each selection. Probably a littebit Javascript and most code in PHP.
每次选择后将参数发送回服务器,并在每次选择后重新加载整个表单。可能是一个littebit Javascript和PHP中的大多数代码。
I'm not sure how this differs much from the third approach, but probably you mean that you need to reload the page? In that case it isn't likely to be a good user experience if they need wait for the page to refresh every time a drop down selection is changed..
我不确定这与第三种方法有什么不同,但可能你的意思是你需要重新加载页面?在这种情况下,如果每次更改下拉选项时需要等待页面刷新,则不太可能是良好的用户体验。
Use AJAX to change all list content dynamically without reloading the whole form.
使用AJAX动态更改所有列表内容,而无需重新加载整个表单。
By far the best approach from a user's perspective as it makes filling out the form simple. Perhaps slightly harder to implement from your end, but as you would likely need to perform the same calculations with each of the solutions - might as well move them to a separate page that can be called by AJAX to retrieve your data. As others have mentioned, using jQuery for all your JavaScript/AJAX stuff is going to make things a hell of a lot easier ;)
从用户的角度来看,这是迄今为止最好的方法,因为它使表单填写简单。从您的最终实现可能稍微困难一些,但是您可能需要对每个解决方案执行相同的计算 - 也可以将它们移动到可由AJAX调用以检索数据的单独页面。正如其他人所提到的,使用jQuery来处理所有JavaScript / AJAX的东西会让事情变得简单得多;)
#2
2
I'd definitely recommend using AJAX with jQuery its tested in all of the major browsers and has simple calls that will make it a lot faster to code and you wouldn't have the browsers compatibility problems of normal JavaScript.
我肯定建议在所有主流浏览器中测试使用AJAX和jQuery,并且调用简单,这将使代码更快,并且你不会遇到普通JavaScript的浏览器兼容性问题。
#3
0
My personal recommendation is to go with AJAX.
我个人的建议是使用AJAX。
Raw SQL or not is really a question of what backend you are using.
原始SQL与否实际上是您正在使用的后端的问题。
You need to be able to set the relationships between the different selections. The population of the lists must be able to communicate with your backend.
您需要能够设置不同选择之间的关系。列表的填充必须能够与您的后端进行通信。
The real issue here is how you implement the relationships between selections. I have no good answer here, it depends heavily on the backend and your administrative needs. It can be hard coded in PHP or configured via XML or via administrative interfaces and persisted to your database solution.
这里真正的问题是如何实现选择之间的关系。我在这里没有好的答案,这在很大程度上取决于后端和管理需求。它可以在PHP中进行硬编码,也可以通过XML或管理界面进行配置,并持久保存到数据库解决方案中。
It's no easy task to make it fully customizable.
要使其完全可定制,这并非易事。
The reason why i suggest using AJAX is basically because you need to filter upon any change in any selection. That would mean either download a lot of unused information or a lot of page refresh. Going with ajax gives the user a smooth experience all the way.
我建议使用AJAX的原因主要是因为您需要过滤任何选择中的任何更改。这意味着要么下载大量未使用的信息,要么下载大量页面。使用ajax可以让用户获得流畅的体验。
#4
0
jquery is a simpple way to use... You can also try a particular class called xajax..! These will make stuff easier.
jquery是一种简单的使用方式...你也可以尝试一个名为xajax的特殊类..!这些将使事情变得更容易。
#1
1
Send all data to the browser and handle the filtering etc client side with Javascript.
将所有数据发送到浏览器并使用Javascript处理过滤等客户端。
You mentioned that your table has 30 columns and 500-5000 rows potentially? In that case it would not be a good idea to send that much data when the page loads as: 1. It will make the page slower to load and 2. It is likely to make the browser hang (think IE).
您提到您的表有30列,可能有500-5000行?在这种情况下,当页面加载时发送那么多数据不是一个好主意:1。它会使页面加载速度慢2.它可能会使浏览器挂起(想想IE)。
Send parameters back to the server after each selection and reload the whole form after each selection. Probably a littebit Javascript and most code in PHP.
每次选择后将参数发送回服务器,并在每次选择后重新加载整个表单。可能是一个littebit Javascript和PHP中的大多数代码。
I'm not sure how this differs much from the third approach, but probably you mean that you need to reload the page? In that case it isn't likely to be a good user experience if they need wait for the page to refresh every time a drop down selection is changed..
我不确定这与第三种方法有什么不同,但可能你的意思是你需要重新加载页面?在这种情况下,如果每次更改下拉选项时需要等待页面刷新,则不太可能是良好的用户体验。
Use AJAX to change all list content dynamically without reloading the whole form.
使用AJAX动态更改所有列表内容,而无需重新加载整个表单。
By far the best approach from a user's perspective as it makes filling out the form simple. Perhaps slightly harder to implement from your end, but as you would likely need to perform the same calculations with each of the solutions - might as well move them to a separate page that can be called by AJAX to retrieve your data. As others have mentioned, using jQuery for all your JavaScript/AJAX stuff is going to make things a hell of a lot easier ;)
从用户的角度来看,这是迄今为止最好的方法,因为它使表单填写简单。从您的最终实现可能稍微困难一些,但是您可能需要对每个解决方案执行相同的计算 - 也可以将它们移动到可由AJAX调用以检索数据的单独页面。正如其他人所提到的,使用jQuery来处理所有JavaScript / AJAX的东西会让事情变得简单得多;)
#2
2
I'd definitely recommend using AJAX with jQuery its tested in all of the major browsers and has simple calls that will make it a lot faster to code and you wouldn't have the browsers compatibility problems of normal JavaScript.
我肯定建议在所有主流浏览器中测试使用AJAX和jQuery,并且调用简单,这将使代码更快,并且你不会遇到普通JavaScript的浏览器兼容性问题。
#3
0
My personal recommendation is to go with AJAX.
我个人的建议是使用AJAX。
Raw SQL or not is really a question of what backend you are using.
原始SQL与否实际上是您正在使用的后端的问题。
You need to be able to set the relationships between the different selections. The population of the lists must be able to communicate with your backend.
您需要能够设置不同选择之间的关系。列表的填充必须能够与您的后端进行通信。
The real issue here is how you implement the relationships between selections. I have no good answer here, it depends heavily on the backend and your administrative needs. It can be hard coded in PHP or configured via XML or via administrative interfaces and persisted to your database solution.
这里真正的问题是如何实现选择之间的关系。我在这里没有好的答案,这在很大程度上取决于后端和管理需求。它可以在PHP中进行硬编码,也可以通过XML或管理界面进行配置,并持久保存到数据库解决方案中。
It's no easy task to make it fully customizable.
要使其完全可定制,这并非易事。
The reason why i suggest using AJAX is basically because you need to filter upon any change in any selection. That would mean either download a lot of unused information or a lot of page refresh. Going with ajax gives the user a smooth experience all the way.
我建议使用AJAX的原因主要是因为您需要过滤任何选择中的任何更改。这意味着要么下载大量未使用的信息,要么下载大量页面。使用ajax可以让用户获得流畅的体验。
#4
0
jquery is a simpple way to use... You can also try a particular class called xajax..! These will make stuff easier.
jquery是一种简单的使用方式...你也可以尝试一个名为xajax的特殊类..!这些将使事情变得更容易。