ASP Ajax 级联菜单

ASP Ajax 级联菜单

网站中，三级联动也会经常用到，例如省市县的选择。通过纯JavaScript编程，需要在页面中添加省市县的数据，代码比较乱，并且添加比较麻烦。为了解决上述问题，将省市县的数据存入数据库，通过Ajax动态加载所需数据，是比较完美的解决方案。本实例通过省市县的三级联动，实现了动态加载所需数据效果。步骤如下所示：

（1）首先为本实例设计数据库，该数据库Access版本，可以从因特网或者本书配套光盘中获得。该数据库的文件名称为area.mdb，数据库中有一个省份表，表设计视图如表8-2所示。

该数据库中还有一个城市表，表设计视图如表8-3所示。

表8-3 city表的字段

表8-4 area表的字段

（2）新建一个名为index.html的HTML文件，该文件为用户提供选择省市县

（3）联动功能通过JavaScript代码实现，接下来编写JavaScript函数，首先来看向服务器端发送请求的show()函数。该函数有三个参数，selectobj为用户选择的下拉框ID，selectvalue为用户选择下拉框的值，obj为服务器端返回的数据要填充

（4）然后编写handleStateChange()函数。该函数接收服务器端返回的数据，并将数据交给BuildSel()函数进行处理。代码如下所示：

（5）编写BuildSel()函数。该函数将字符串转换为数组，添加到指定的下拉列

（6）编写该页面首次加载时的初始函数init()。该函数调用show()函数，并将showobj变量赋值为“province”，实现页面首次加载时，显示省份下拉列表框中数据的功能。代码如下所示：

（7）在页面的标记添加onload事件，实现当页面加载时，执行init()函数的功能。代码如下所示：

（8）客户端编写完成，接下来编写服务器端程序。新建名为Ajax.asp的asp 文件，该文件获得客户端请求，从数据库中读取响应信息，返回给客户端。conn.as p文件为连接数据库area.mdb的连接语句，这里省略此代码的罗列。Ajax.asp文件

效果如图8-9所示。

图8-9 三级联动效果