使用动态JavaScript实现多级菜单联动时不刷新页面的方法

问题的提出：如下图所示，需要使用多级菜单输入地址，具体有以下要求：

（1）    当选中某一级列表项时才能出现该项对应的下一级列表供用户选择。比如在省级区域选中“湖北省”时，市级区域里边只能出现湖北省的所有市级区域供选择，当省级区域中更换成“湖南省”时，市级区域列表应该马上更新为湖南省的所有市级区域供选择。因此，这三级列表是联动的。

（2）    在选择地址的过程中不能刷新页面。刷新页面其实只是一种外观表现，就是用户感觉到页面在刷新，其实质是用户在选择多级地址的过程中需要由程序访问服务器端的数据库读取数据，重新加载页面，速度比较慢，让用户感觉页面有一个刷新的过程，比如选中省级区域为“湖北省”时需要从数据库读取湖北省所属的市级区域生成市级区域列表，这样便有一个页面刷新的过程。为了不刷新页面，就必须把数据保存在客户端，从而在更新多级列表时不需要访问服务器。

图示 使用多级列表输入地址

问题的解决：

客户端可以有两个地方保存数据，其一是在页面文件保存，将所有的地址静态编码到aspx文件中，但这样的话aspx文件会非常庞大，并且人工把这么多的地址静态编码到aspx文件当中工作量太大，同时页面静态编码无法实现多级列表联动。其二是将数据保存在JavaScript脚本，同时使用JavaScript脚本作为运行程序可以实现多级列表联动。

为了减少代码量，本系统使用了动态JavaScript，即添加一个aspx页面，用它的后台程序从数据库读取三级地址信息，动态生成JavaScript脚本，然后将它作为JavaScript文件发送到客户端。在本实例中，后台程序AreaJS.aspx.cs只有173行，而用它生成的动态JavaScript文件有4643行，大大减少了程序员的工作量。这个JavaScript被发送到客户端，可以很好地实现页面不刷新。

这种方法的巧妙在于使用aspx页面动态生成JavaScript，大幅度减少了代码量。