Ajax实现 下拉列表联动

 时间:2024-11-08 11:15:44

目标:利用Ajax从数据库取出数据,实现下拉列表联动。

工具/原料

Eclipse

原理

1、第一个下拉列表是由用户想action发送请求,直接将数据库内容发送到页面,一级下拉列表进行获取。第二个下拉列表则需要触发第一个下拉列表的onchange事件,利用Ajax向action请求数据!

表设计

1、数据库里面建立两张表,一张表是一级下拉列表,另外一张是二级下拉列表,同时二级下拉列表需要引用一级下拉列表的ID,如下图所示:

Ajax实现 下拉列表联动Ajax实现 下拉列表联动

Ajax设计

1、创建XMLHttpRequest对象,如下图所示:

Ajax实现 下拉列表联动

3、回调函数,如下图所示:注意需要删除一个元素,因为action里面是以空格连接下拉列表的各项的,最后一个需要删除,否则下拉列表会多出一个空项。

Ajax实现 下拉列表联动

2、根据一级下拉列表的id请求二级下拉列表,注意空格,如下图所示:

Ajax实现 下拉列表联动

XML设计

1、没什么好说的,上图:

Ajax实现 下拉列表联动
  • 如何用VB做游戏菜单
  • win10不小心把娱乐删除了如何添加
  • Xmanager连接CentOS 7远程桌面
  • 如何在 Windows 10 中更改反馈频率
  • 如何在Windows10系统禁止使用系统热键
  • 热门搜索
    孕妇感冒鼻塞怎么办 怎么转换mp3格式 怎么开通网银 玻璃贴膜怎么去除 幻灯片怎么做 卫青怎么死的 晚上睡觉出虚汗怎么回事 怎么才能快速减肥 怎么锻炼肺活量 微信黑名单怎么恢复