ASP Ajax 级联菜单
网站中,三级联动也会经常用到,例如省市县的选择。通过纯JavaScript编程,需要在页面中添加省市县的数据,代码比较乱,并且添加比较麻烦。为了解决上述问题,将省市县的数据存入数据库,通过Ajax动态加载所需数据,是比较完美的解决方案。本实例通过省市县的三级联动,实现了动态加载所需数据效果。步骤如下所示:
(1)首先为本实例设计数据库,该数据库Access版本,可以从因特网或者本书配套光盘中获得。该数据库的文件名称为area.mdb,数据库中有一个省份表,表设计视图如表8-2所示。
该数据库中还有一个城市表,表设计视图如表8-3所示。
表8-3 city表的字段
表8-4 area表的字段
(2)新建一个名为index.html的HTML文件,该文件为用户提供选择省市县
Web.Config中: -----------------------------------------------------------------------------------------------
实现基于Ajax 的无限级菜单 特点: 支持Form 的无闪提交(方法有点笨) 支持MVC框架,即支持传统网页架构 多线程并发请求(要语言支持线程) 动态加载文件,只加载有用的!处理了Ajax 框架臃肿的JS 文件问题采用no table 的全div + css 布局 a.获得XMLHTTPReque对象,网上到处都找得到了,不多说:function newXMLHttpRequest() { var xmlreq = false; if (window.XMLHttpRequest) { xmlreq = new XMLHttpRequest(); } else if (window.ActiveXObject) { try { xmlreq = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e1) { try { xmlreq = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e2) { } } } return xmlreq; 这里提供一个通用的支持多浏览器的方法。
b. 提出异步请求 // 这里用Bcandy 作为方法名是为了感谢一个对我来说很重要的人,她一直在支持我 function Bcandy(Tid,url,parm,js) { if(url == ""){ return; } // 这是一个加载信息提示框,也可以不要! document.getElementById("load").style.visibility = "visible"; // 加载相应页面的JS 文件 if(js != null){ //加载JS文件 LoadJS(js); } // 获取一个XMLHttpRequest 实例 var req = newXMLHttpRequest(); // 设置用来从请求对象接收回调通知的句柄函数 var handlerFunction = getReadyStateHandler(req,Tid); req.onreadystatechange = handlerFunction; // 第三个参数表示请求是异步的 req.open("POST", url, true); // 指示请求体包含form 数据 req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); // 发送参数 req.send(parm);
中北大学
课 程 设 计 说 明 书
学生姓名: 学 专 题 院: 业:
XXXXXX
学 号:
1005xxxxx
信息与通信工程学院 电子信息科学与技术
目:74HC164级联实现四位数码管显示电路设计 程耀瑜 李文强 职称: 职称: 教授 讲师
指导教师:
2013
年
1
月
17
日
中北大学
课程设计任务书
2012/2013 学年第 一 学期
学 专
院: 业:
信息与通信工程学院 电子信息科学与技术 xxxxxxx 学 号: 100xxxxxxx
学 生 姓 名: 课程设计题目: 起 迄 日 期: 课程设计地点: 指 导 教 师: 系 主 任:
74HC164 级联实现四位数码管显示电路设计 1 月 4 日~1 月 15 日 中北大学 程耀瑜,李文强 程耀瑜
下达任务书日期:
2010 年 1 月 3 日
课 程 设 计 任 务 书
2
课 程 设 计 任 务 书
1.设计目的:
本课程设计主要针对模拟电子技术和数字电子技术课程要求,培养学生在查阅资料 的基础上,进行实用电路设计、计算、仿真、调试等多个环节的综合能力,同时培养学 生用课程中所学的理论独立地解决实际问题的能力。另外还培养学生用专业的、简洁的 文字,清晰的图表来表达自己设计思想的能力。
2.设计内容和要求(包括原始数据、技术参数、条件、设计要求等) :
(1)了解 74HC164 的工作原理,掌握其功能和引脚; (2)掌握 74HC164 级联电路的设计、仿真与调试; (3)掌握 74HC164 控制多只数码管电路的设计、仿真与调试; (4)掌握方案设计与论证;
3.设计工作任务及工作量的要求〔包括课程设计计算说明书(论文)、图纸、 实物样品等〕 :
(1)提供核心器件的工作原理与应用介绍; (2)提供用 Protel99 设计的电路原理图,也可给出印刷板电路图; (3)提供用 Multisim、MaxPluss、Proteus 等其他软件对电路的仿真结果与分析; (4)提供符合规定要求的课程设计说明书; (5)提供参考文献不少于三篇,且必须是相关的参考文献;
3
最简单jQuery实现二级省市级联,三级级联可依此扩展 1.首先需要引入jQuery 2.取出省份下拉列表对象,当省份下拉列表域发生改变时,执行如下方法 3.该方法解析:取出省份下拉列表对象,和被选中的option文本,取出城市下拉列表对象,并清空城市所有option,根据省份被选中的option内的文本,来填充不同的城市,由此实现二级联动。