琥珀无限级分类联动菜单AJAX版

所属分类：网络编程 / AJAX相关阅读数： 1448

收藏 0赞 0分享

我做好琥珀无限级分类联动菜单Javascript版后，在蓝色理想和CSDN上发表了一下，梅花雪兄在CSDN上提出了效率不足的问题，我也认识到了这一点，本打算项目完工后再进行完善，但一时技痒，便在网上寻找了一下资料，最后做出了此AJAX版无限级分类联动菜单。因时间匆忙，做得比较粗糙，但已利用AJAX技术，实现无限级联动，待过一段时间再完善此版本。
希望能给大家提供一些帮助，有好的建议或bug可在此帖后回复或浏览http://www.51ajax.com/bbs/发帖。
运行环境：MS IE 6.0 FireFox 1.0.1
下载地址：请点击这里
在线Demo：请点击这里
Bug 反馈：请点击这里
最后更新：2005-10-20 16:18
共有两个文件：
文件ajax.html代码如下：

<html>   <head>     <meta http-equiv="Content-Type" content="text/html; charset=gb2312">     <meta content="琥珀[hopesoft],[url]http://www.10090.com[/url]" name="author">     <title>琥珀网 - 无限级联动菜单[AJAX版]</title>           <form name="form1" method="post" action="">         <table width="90%" border="0" align="center" cellpadding="2" cellspacing="1" bgcolor="#CCCCCC">           <tr bgcolor="F1F1F1">             <td height="24" colspan="2" align="center">琥珀无限级联动菜单-AJAX版 [HPMenu_AJAX V1.0]</td>           </tr>           <tr bgcolor="#FFFFFF">             <td width="12%" height="24" align="center">所 在 洲:</td>             <td><select name="sel1" id="sel1" onChange="GetResult(this.value,1)">                <option value="" selected>-----请选择-----</option>               <option value="10">亚洲</option>               <option value="11">欧洲</option>             </select></td>           </tr>           <tr bgcolor="#FFFFFF">             <td height="24" align="center">国　　家:</td>             <td><select name="sel2" onChange="GetResult(this.value,2)">                <option value="" selected>-----请选择-----</option>             </select></td>           </tr>           <tr bgcolor="#FFFFFF">             <td height="24" align="center">城　　市:</td>             <td><select name="sel3" id="sel3" onChange="GetResult(this.value,3)">                <option value="" selected>-----请选择-----</option>             </select></td>           </tr>           <tr bgcolor="#FFFFFF">             <td height="24" align="center">地　　区:</td>             <td><select name="sel4" id="sel4">                <option value="" selected>-----请选择-----</option>             </select></td>           </tr>           <tr bgcolor="F1F1F1">             <td height="24" colspan="2" align="center" id="ajax">&nbsp;</td>           </tr>       </table>                  <table width="90%"  border="0" align="center" cellpadding="0" cellspacing="0">           <tr>             <td height="25" align="left">下载地址：<a href="http://www.10090.com/demo/hpmenu/HPMenu_ajax.rar" target="_blank">请点击这里</a></td>           </tr>           <tr>             <td height="25" align="left">在线Demo：<a href="http://www.10090.com/demo/" target="_blank">请点击这里</a></td>           </tr>           <tr>             <td height="25" align="left">Bug 反馈：<a href="http://www.10090.com/bbs/index.asp?boardid=60" target="_blank">请点击这里</a></td>           </tr>           <tr>             <td height="25" align="left">最后更新：2005-10-20 16:18</td>           </tr>           <tr>             <td height="25" align="left">联系方式：MSN:hopesoft@msn.com</td>           </tr>           <tr>             <td height="50" align="center">copyright(c) 2005 <a href="http://www.10090.com">Hopesoft Studio</a> </td>           </tr>         </table>          </form> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

文件ajax_server.asp代码如下：

<% @Language="JavaScript" %> <% function OpenDB(sdbname) { /* *--------------- OpenDB(sdbname) ----------------- * OpenDB(sdbname)  * 功能:打开数据库sdbname,返回conn对象. * 参数:sdbname,字符串,数据库名称. * 实例:var conn = OpenDB("database.mdb"); *--------------- OpenDB(sdbname) ----------------- */ var connstr = "Provider=Microsoft.Jet.OLEDB.4.0; Data Source="+Server.MapPath(sdbname); var conn = Server.CreateObject("ADODB.Connection"); conn.Open(connstr); return conn; } var oConn = OpenDB("ajax_data.mdb"); var sel = Request("sel"); var classid = Request("classid") var fieldname = Request("fieldname") var arrResult = new Array(); //var sql = "select "+fieldname+" from Demo where parentid='"+sel+"' and classid="+classid; var sql = "select id,"+fieldname+" from Demo where parentid='"+sel+"'"; //Response.Write("alert("+sql+")") var rs = Server.CreateObject("ADODB.Recordset"); rs.Open(sql,oConn,1,1); while(!rs.EOF) { //遍历所有适合的数据放入arrResult数组中. arrResult[arrResult.length] = rs(0).Value+"|"+rs(1).Value; rs.MoveNext(); } //escape解决了XMLHTTP。中文处理的问题. //数组组合成字符串.由","字符串连接. Response.Write(escape(arrResult.join(","))); %>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

以上两个版本的程序，也是揉合了众多网友的智慧，经我之手呈现出来，互联网的初衷与精髓就在于分享，愿这个小程序能给您带来些许方便。

更多精彩内容其他人还在看

琥珀无限级分类联动菜单AJAX版

Baidu Musicbox 用到的ajax代码

[asp]天枫AJAX百度音乐即时听附下载

[asp]天枫AJAX blog V1.0 程序提供下载了

如何解决远程页面抓取中的乱码问题

一个方便AJAX开发的通用类

AJAXRequest v0.2

一个简单的AJAX请求类

一个Ajax类

AJAX 常用函数

[ASP.NET Ajax] ECMAScript基础类以及Asp.net Ajax对类<Object>的扩展

网络赚钱

站长故事

琥珀无限级分类联动菜单AJAX版

Baidu Musicbox 用到的ajax代码

[asp]天枫AJAX百度音乐即时听附下载

[asp]天枫AJAX blog V1.0 程序提供下载了

如何解决远程页面抓取中的乱码问题

一个方便AJAX开发的通用类

AJAXRequest v0.2

一个简单的AJAX请求类

一个Ajax类

AJAX 常用函数

[ASP.NET Ajax] ECMAScript基础类以及Asp.net Ajax对类&lt;Object&gt;的扩展

网络赚钱

站长故事

[ASP.NET Ajax] ECMAScript基础类以及Asp.net Ajax对类<Object>的扩展