2010-06-09 81 views
2

我一直在寻找解决方法很长一段时间,但认为是时候我解决它了。 如果我有一个页面有一个下拉菜单,是否有我可以选择一个值,随后将进一步下载其他值。关于JavaScript或AJAX的一个简单问题

这可以在没有页面重新加载的情况下完成吗?

我会给你一个例子。 假设我正在为管理控制台制作一些工具,但首先他们需要选择一名成员才能使用。 他们会选择成员,然后在下面,根据第一个菜单中选择的内容填充关于该成员的字段。

正如我已经问过,这可以做到没有页面重新加载?

感谢您的阅读。

+0

看看http://www.cars.com/是怎么做的 – 2010-06-09 10:17:15

回答

1

回答是可以做到的。

首先,您需要一个事件,在这种情况下,您需要对selectBox的事件onChange采取行动。所以当一个项目改变时,你运行一个函数。

现在你有2个选择。您可以使用AJAX或NOT来做到这一点,它确实取决于应用程序的复杂性/安全性。

在我指的是

  1. 用户以下:其中使用的应用程序
  2. 隐藏客户端数据:网页加载过程中的数据发送到客户端,但对所有用户不可见,但使用查看源代码或者下载JS文件,数据不安全。

方法1 - NO AJAX

基础知识:你把所有可能的显示选项下开始时首先加载的页面,而是选择框的onchange事件中仅显示与用户相关的章节。

在以下情况下推荐:如果检测到隐藏的客户端数据(或者不会被检测到,或者您只是相信您的受众以预定方式使用该应用),则不提供安全限制。最后,当您的总视图排列较少时。

方法2 - AJAX

基础知识:你发下来最初只在页面骨架,当用户改变选择框的值,然后你做一个AJAX请求到服务器 - 抓住新视角那些与该用户相关的信息,将其发送回一个脚本,该脚本将该用户数据注入到DOM中。

建议您:公共场所或安全考虑的场所。如果您有大量视图排列或想要比场景1更多的个性化设置。

正如您所看到的,两种方法都不需要重新发布 - 方法1在前期提供所有内容,方法2在需要时使用AJAX填充数据。根据您的要求,这两种方法都是有效的。

+0

在第一个选择框改变之后,会有大约10个更多的下拉框要考虑,AJAX是更好的方法呢? – sark9012 2010-06-09 10:32:26

+0

是的,我会选择Ajax。另一个考虑因素是延迟,如果你不使用它,你需要留意在使用Ajax时让你的受众意识到加载的意识,否则人们可能会发现这些想法不起作用。 – 2010-06-09 10:34:27

+0

并且不要使用Microsoft Ajax框架 - 它们是邪恶的。 – 2010-06-09 10:36:25

3

是的,它可以在没有AJAX的情况下完成。当呈现页面时通将被下拉列表中使用的所有集合的JSON对象到HTML:

var collection = [{ id: 1, name: 'John' }, { id: 2, name: 'Smith' }]; 
... 

然后注册了第一个下拉的变化情况,并根据所选择的价值去从其他集合中获取数据。当然,如果你有很多数据,这可能不太实际,因为你的页面会变得非常大,在这种情况下,AJAX会更合适。

0

。阿贾克斯主要用于IE浏览器(无需重新加载页面)

你必须使用下面的步骤来实现

  1. 创建一个链接,并调用JavaScript功能上它onchange功能
  2. 在JavaScript函数你必须调用Ajax请求。
  3. 更新您的ajax响应中的div。