ASP Ajax 级联菜单

格式：doc
大小：95.50 KB
文档页数：5

下载文档原格式

/ 5

两天时间用AJAX写了个无限级的多级联动菜单(ajax+PHP构架)

花了两天时间。

研究ＡＪＡＸ，终于独立完成一个无限组的多级菜单联动功能。

主要特点：就是ＨＴＭＬ静态页面可以无刷新的与ＰＨＰ动态角本文件及数据库交互（这也是ＡＪＡＸ的核心目的）。

以下把代码贴出来。

供大家参考指正：ajax.js文件（位于根目录下js子目录）var xmlHttp;function createXmlHttp(){if(window.XMLHttpRequest){xmlHttp=new XMLHttpRequest();}else{xmlHttp=new ActiveXObject("Microsoft.XMLHttp");}}basic_inc.php(位于根目录下/include子目录下)<?php$DB_SERVER="localhost";$DB_NAME="ajax";$DB_USER="root";$DB_PASSWORD="";?>conn.php(位于根目录下/include子目录下)<?phprequire_once("dir_inc.php");require_once($ROOT_DIR."include/basic_inc.php");@ $db=mysql_connect($DB_SERVER,$DB_USER) or die ("faile!".mysql_error());@mysql_select_db($DB_NAME);?>dir_inc.php（位于根目标下/include子目录下）<?php$ROOT_DIR="../";?>select_menu.html(位于根目录下是核心前台文件)<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title>select_menu</title><script type="text/javascript" src="js/ajax.js">//这里引用创建xmlHttp对像的文件（对浏览器做过判断）</script><script type="text/javascript">var targetSelId; //申明一个全局变量用来存放当前要操作的对像的ＩＤvar selArray;//申明一个全局数组。

ajax+java+jsp做的二级菜单联动（全）

ajax+java+jsp做的二级菜单联动（全）/*Navicat MySQL Data TransferSource Server : meetingroomMSSource Server Version : 50146Source Host : localhost:3306Source Database : skyTarget Server Type : MYSQLTarget Server Version : 50146File Encoding : 65001*/SET FOREIGN_KEY_CHECKS=0;-- ------------------------------ Table structure for `category`-- ----------------------------DROP TABLE IF EXISTS `category`;CREATE TABLE `category` (`id` int(11) NOT NULL DEFAULT '0',`name` varchar(50) DEFAULT NULL,`level` int(11) DEFAULT NULL,`parentid` int(11) DEFAULT NULL,PRIMARY KEY (`id`)) ENGINE=InnoDB DEFAULT CHARSET=utf8;-- ------------------------------ Records of category-- ----------------------------INSERT INTO `category` VALUES ('1', '数据库开发', '0', '0'); INSERT INTO `category` VALUES ('2', 'mysql5.0', '1', '0'); INSERT INTO `category` VALUES ('3', 'IBM DB2', '1', '0');INSERT INTO `category` VALUES ('4', 'Orcal', '1', '0'); INSERT INTO `category` VALUES ('5', 'web 开发', '0', '1'); INSERT INTO `category` VALUES ('6', 'asp', '1', '1'); INSERT INTO `category` VALUES ('7', 'jsp', '1', '1'); INSERT INTO `category` VALUES ('8', 'php', '1', '1'); INSERT INTO `category` VALUES ('9', '其他', '0', '2'); INSERT INTO `category` VALUES ('10', 'abc', '1', '2'); INSERT INTO `category` VALUES ('11', 'bbb', '1', '2'); INSERT INTO `category` VALUES ('12', 'ccc', '1', '2');========================本个数据库 Mysql 5.0 ,用户名:root ,密码：123一个类来获得数据库的 getCon()package com.xmlT est.yuan.DB;import java.sql.Connection;import java.sql.DriverManager;import java.sql.SQLException;public class ConnDB {public Connection getCon(){try {Class.forName("com.mysql.jdbc.Driver");} catch (ClassNotFoundException e) {// TODO Auto-generated catch blocke.printStackTrace();}String url = "jdbc:mysql://localhost:3306/sky"; Connection con = null;try {con = DriverManager.getConnection(url,"root","123");} catch (SQLException e) {// TODO Auto-generated catch blocke.printStackTrace();}return con;}}----------------------index.jsp----------------------<%@ page language="java" import="java.util.*,com.xmlTest.yuan.DB.*,java.sql.*" pageEncoding="GBK"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+reque st.getServerPort()+path+"/";%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><base href="<%=basePath%>"><title>ajax + java + jsp 做的二级菜单联动 </title><meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0"><meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="This is my page"> <script type="text/javascript"></script></head><body>This is my JSP page. kao <br><form name="form1" ><select name="select1" onchange="getLevel2()"><option >选择一级分类</option><%ConnDB cdb = new ConnDB();Connection con = cdb.getCon();Statement stmt = null;String sql = "select * from category where level=0";//String parentid = "2";//String sql = "select * from category where parentid="+parentid;ResultSet rs = null;try {stmt = con.createStatement();rs = stmt.executeQuery(sql);while(rs.next()){System.out.println(rs.getInt(4));rs.getInt(4);%><option value="<%=rs.getInt(4) %>"><%=rs.getString(2)%> </option><% }} catch (SQLException e) {// TODO Auto-generated catch blocke.printStackTrace();}finally{try {rs.close();stmt.close();con.close();} catch (SQLException e) {// TODO Auto-generated catch blocke.printStackTrace();}}%></select><select name="select2" ><option valer="0" >请选择。

级联菜单

Java SERVLET&JSP Day02 Top1.级联下拉列表2.使用JSON完成级联下拉列表3.热卖商品动态显示4.jQuery演示5.select选择器1 级联下拉列表1.1 问题使用AJAX实现级联下拉列表，实现效果如下图所示：1.2 方案1）city.jsp1.<%@ page contentType="text/html; charset=utf-8"2.pageEncoding="utf-8"%>3.<html>4.<head>5.<title>Insert title here</title>6.<script type="text/javascript"7. src="js/prototype-1.6.0.3.js"></script>8.<script type="text/javascript">9.10.function getXmlHttpRequest(){11.var xhr =null;12.if((typeof XMLHttpRequest)!='undefined'){13. xhr =new XMLHttpRequest();14.}else{15. xhr =new ActiveXObject('Microsoft.XMLHttp');16.}17.return xhr;18.}19.20.function change(v1){21. var xhr =getXmlHttpRequest();22. xhr.open('post','city.do',true);23. xhr.setRequestHeader("Content-Type",24."application/x-www-form-urlencoded");25. xhr.onreadystatechange=function(){26.//服务器返回 yy,岳阳;cs,长沙;hh,怀化27.if(xhr.readyState ==4){28. var txt = xhr.responseText;29. var arr = txt.split(';');30. $('s2').innerHTML ='';31.for(i=0;i<arr.length;i++){32. var arr1 = arr[i];33. var arr2 = arr1.split(',');34. var op =new Option(arr2[1],arr2[0]);35. $('s2').options[i]= op;36.}37.}38.};39. xhr.send('name='+ v1);40.}41.</script>42.</head>43.<body style="font-size:30px;">44.<select id="s1" style="width:120px;"45. onchange="change(this.value);">46.<option value="hn">湖南</option>47.<option value="bj">北京</option>48.</select>49.<select id="s2" style="width:120px;">50.</select>51.</body>52.</html>2）ActionServlet1.package web;2.3.import java.io.IOException;4.import java.io.PrintWriter;5.import javax.servlet.ServletException;6.import javax.servlet.http.HttpServlet;7.import javax.servlet.http.HttpServletRequest;8.import javax.servlet.http.HttpServletResponse; 9.10.publicclass ActionServlet extends HttpServlet {11.12.public void service(HttpServletRequest request,13. HttpServletResponse response)14.throws ServletException, IOException {15. String uri = request.getRequestURI();16. String path = uri.substring(stIndexOf("/"),17. stIndexOf("."));18. response.setContentType("text/html;charset=utf-8");19. PrintWriter out = response.getWriter();20.if(path.equals("/city")){21. String name = request.getParameter("name");22.if(name.equals("hn")){23. out.println("yy,岳阳;hh,怀化;cs,长沙");24.}elseif(name.equals("bj")){25. out.println("cy,朝阳;hd,海淀;dc,东城;xc,西城");26.}27.}28. out.close();29.}30.}3）访问http://localhost:8080/web13_ajax/city.jsp1.3 实现请参考方案部分的代码。

asp二级联动下拉菜单

<td height="30"><select size="1" name="City"></select></td>
</tr>
</table>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>会员登录</title>
</head>
<body>
<script language ="javascript" >
<td height="30" bgcolor="#D4D0C8"><select size="1" name="Region" onchange ="changeselect(document.form1.Region.options[document.form1.Region.selectedIndex].value)">
set rs = conn.execute(sql)
while not rs.eof
msg = msg & "<option value=""" & rs("id") & """>" & rs("class1") & "</option>"

PHPAJAX2级联动下拉列表（...

PHPAJAX2级联动下拉列表（...PHP+AJAX2级联动下拉列表（简单好用）这次给大家展示的是非常常用的一个ajax功能－－联动下拉列表，本程序采用2级联动，根据数据库的内容用ajax处理下拉列表内容，实现根据用户需求取得下拉选项，交互性强，更新容易。

废话少说，不如正题，这次依然象往常一样提供截图和源码下载，首先还是AJAX框架：var http_request=false;function send_request(url){//初始化，指定处理函数，发送请求的函数http_request=false;//开始初始化XMLHttpRequest对象if(window.XMLHttpRequest){//Mozilla浏览器http_request=new XMLHttpRequest();if(http_request.overrideMimeType){//设置MIME类别http_request.overrideMimeType("text/xml");}}else if(window.ActiveXObject){//IE浏览器try{http_request=new ActiveXObject("Msxml2.XMLHttp");}catch(e){try{http_request=new ActiveXobject("Microsoft.XMLHttp");}catch(e){}}}if(!http_request){//异常，创建对象实例失败window.alert("创建XMLHttp对象失败！");return false;}http_request.onreadystatechange=processrequest;//确定发送请求方式，URL，及是否同步执行下段代码http_request.open("GET",url,true);http_request.send(null);}//处理返回信息的函数function processrequest(){if(http_request.readyState==4){//判断对象状态if(http_request.status==200){//信息已成功返回，开始处理信息document.getElementById(reobj).innerHTML=http_request.respons eText;}else{//页面不正常alert("您所请求的页面不正常！");}}}function getclass(obj){var pid=document.form1.select1.value;document.getElementById(obj).innerHTML="<option>loading...</o ption>";send_request(‘doclass.php?pid=‘+pid);reobj=obj;}这个程序的核心就是动态添加<option>......</option>服务器端是进行数据的检索，很简单：<?phpheader("Content-type: text/html;charset=GBK");//输出编码,避免中文乱码$pid=$_GET[‘pid‘];$db=mysql_connect("localhost","root","7529639"); //创建数据库连接mysql_query("set names ‘GBK‘");mysql_select_db("menuclass");$sql="select classname from menu where parentid=".$pid."";$result=mysql_query($sql);//循环列出选项while($rows=mysql_fetch_array($result)){echo ‘<option>‘;echo $rows[‘classname‘];echo "</option>\n";}>再看看列表页面的html：<script language="javascript" src="ajaxmenu.js"></script><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>ajax2级联动菜单演示</title></head><body><form name="form1"><select name="select1" id="class1" style="width:100;" onChange="getclass(‘class2‘);"><option selected="selected"></option><option value="1">大类1</option><option value="2">大类2</option></select><select name="select2"id="class2" style="width:100;"></select></form></body></html>附件1.jpg(1.99 KB)2007-9-24 10:04PHP+AJAX2级联动下拉列表2.jpg(3.25 KB)2007-9-24 10:04PHP+AJAX2级联动下拉列表3.jpg(5.92 KB)2007-9-24 10:04PHP+AJAX2级联动下拉列表4.jpg(5.62 KB)2007-9-24 10:04PHP+AJAX2级联动下拉列表ajaxdemo.rar(1.66 KB)2007-9-24 10:05, 下载次数: 3PHP+AJAX2级联动下拉列表搜索更多相关主题的帖子: AJAX PHP列表台州南开技术小组专门用PHP+MYSQL技术进行Web(网站、平台、系统等)开发，凭借其开发产品的非凡速度、领先的技术优势、富于创新的开发团队，为众多行业门户、专业型站点提供最有优质的服务和技术保障。

PHP+Ajax三级联动菜单

PHP+Ajax三级联动菜单PHP+Ajax 三级联动菜单PHP+Ajax实例+注释演示2009-08-26 13:01一.使用ajax有以下固定步骤：1, 从页面触发Ajax的操作.2, 定义创建XMLHttpRequest对象的方法(建立一个XMLHttpRequest对象),也是就var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");//根据浏览器的不同有差异3, 然后建立一个函数，用来指定载入的数据来源！3.1,使用open方法打开数据来源(也就是我们要传入参数到DB查询的信息)，但不意味着一定要发送数据显示！3.2,用onreadystatechange来指定数据装载的方式.(onreadystatechange是一个异步响应事件，就是因为它，ajax才那么完美.onreadystatechange事件中可以接收到服务器传回来的数据，通过分析和利用这些数据从而完成客户端的相应操作，onreadystatechange中的第三个参数你设为true，表示启用xmlHttp的异步通讯模式，这时你发出send命令后，浏览器还可以进行其它操作，如果设为false，浏览器就会进入无响应状态，直到xmlHttp接收完毕服务器传回的数据)3.3,使用send发送数据！4, 处理Ajax回传的数据(xml或text类型),使数据能按你的意愿现实在客户端.5, 回显到页面给用户.二,在网上看了一些资料,自己修改后,小小的整理主要出核心代码+精彩注释,全部贡献:index.php 客户端显示,包括执行AJAX的过程data.php 数据处理,查询数据,并回显/*************************index.php**********************/<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script type="text/javascript">/*********定义创建XMLHttpRequest对象的方法***************************************/var xmlHttp;//声明变量var requestType="";//声明初始类型为空function createXMLHttpRequest()//定义创建一个跨浏览器函数的开头{if(window.ActiveXObject)//ActiveXObject对象到找到的时候返回的是真，否则是假{xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");//这个是使用IE的方法创建XmlHttp}else if(window.XMLHttpRequest){xmlHttp=new XMLHttpRequest();//这个是使用非IE的方法创建XmlHttp}}/****************判断服务器响应的事件，如果返回是4则说明交互完成，判断标示头，**************************************************/function handleStateChange(){//判断返回的一个函数，来确定执行那个的函数if(xmlHttp.readystate==4){//4说明是执行交互完毕0 (未初始化)1 (正在装载)2 (装载完毕) 3 (交互中)4 (完成)if(xmlHttp.status==200){//http的一个报头说明成功找到if(type=="city"){//判断查询的类型showcity();//返回响应的显示}else if(type="area"){//判断响应的查询的类型showarea();//返回响应的显示}}}}/**************************城市的一个查询函数**********************************************************/function queryCity(citycode){//执行程序查询，查询城市的eval("document.form1.city.length=0;");//eval检查JScript 代码并执行.eval("document.form1.city.options.add(new Option('请选择城市','-1'));");createXMLHttpRequest();//调用创建XmlHttp的函数type="city";//表示类型，查询城市处理显示的时候需要用到varurl='data.php?provincecode='+citycode+'&n='+Math.random() ;//设定URL传值方法同时防止缓存xmlHttp.open("GET",url,true);//建立服务器连接，异步传输truexmlHttp.onreadystatechange=handleStateChange;//处理这个响应所需要的函数xmlHttp.send(null);//执行程序函数这里的中间的参数是因为GET原因}/**********************县区的一个查询函数***********************************************************/function queryArea(citycode){//查询程序eval("document.form1.area.length=0;");//eval检查 JScript 代码并执行.eval("document.form1.area.options.add(new Option('请选择县市','-1'));");createXMLHttpRequest();//调用创建XmlHttp的函数type="area";//查询县的varurl="data.php?citycode="+citycode+'&n='+Math.random();//设定URL传值方法同时防止缓存xmlHttp.open("GET",url,true);xmlHttp.onreadystatechange=handleStateChange;//处理响应的函数名xmlHttp.send(null);//执行程序函数这里的中间的参数是因为GET原因}/*********************一个显示函数*********************/function showcity(){//显示函数var a = xmlHttp.responseText.split('-');n = a.length;var aa = new Array();for(var i=0;i<n;i++){aa = a[i].split('**');eval("document.form1.city.options.add(newOption(aa[1],aa[0]));");//eval检查 JScript 代码并执行.}}function showarea(){var a = xmlHttp.responseText.split('-');n = a.length;var aa = new Array();for(var i=0;i<n;i++){aa = a[i].split('**');eval("document.form1.area.options.add(newOption(aa[1],aa[0]))");}//document.getElementById("area").innerHTML=xmlHttp.re sponseText;//捕获ID显示返回的数据}</script></head><body><?php$conn = mysql_connect("localhost","root","3661000");//链接数据库mysql_select_db("novel");//选择数据库mysql_query("set names 'utf8'");//设定字符集$sql = "select * from province";//查询数据库province表也就是省$result = mysql_query($sql);//执行语句赋值给变量><form name="form1"><select id='province' onchange='queryCity(this.options[this.selectedIndex].value)'> <option value='-1' selected>请选择省份</option><?phpwhile($row=mysql_fetch_row($result)){//循环循环查询显示省输出数据显示echo "<option value='$row[1]'>$row[2]</option>\n";}></select><select name="city" onchange="queryArea(this.options[this.selectedIndex].value)"></select> <select name="area"></select> </form></body></html>/***************data.php*****************/<?php$provincecode = $_GET['provincecode'];//接收省键值$citycode = $_GET['citycode'];//接收城市键值$conn = mysql_connect("localhost","root","3661000");//连接主机mysql_select_db("novel");//选择数据库mysql_query("set names 'utf8'");if($provincecode!=""){//如果传递过来的不为空则执行$sql = "select * from city where provincecode=$provincecode";//查询城市符合属于上边传递过来的省的字段$result = mysql_query($sql);//执行SQL查询语句while($row=mysql_fetch_row($result)){//循环记录集$xml .= $row[1]."**".$row[2]."-";}}if($citycode!=""){$sql = "select * from area where citycode=$citycode";$result = mysql_query($sql);while($row = mysql_fetch_row($result)){$xml .=$row[1]."**".$row[2]."-";}}$xml = substr($xml,0,strlen($xml)-1);//消掉最后的"-"echo $xml; //返回数据做回显。

java AJAX实现级联下拉框

new
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE class SYSTEM "product.dtd" > <class> <class1 className="电脑配件" id="1"> <class2 className="内存" id="1"> <class3 id="1" className="kingmax"></class3> <class3 id="2" className="kingston"></class3> <class3 id="3" className="samsung"></class3> <class3 id="4" className="hydadi"></class3> <class3 id="5" className="ibm"></class3> </class2> <class2 className="硬盘" id="2"> <class3 id="6" className="hithait"></class3> <class3 id="7" className="IBM"></class3> <class3 id="8" className="samsung"></class3> <class3 id="9" className="westdata"></class3> </class2> </class1> <class1 className="食品配件" id="2"> <class2 className="汉堡包" id="1"> <class3 id="1" className="麦当劳"></class3> <class3 id="2" className="肯得基"></class3> <class3 id="3" className="罗杰丝"></claቤተ መጻሕፍቲ ባይዱs3>

ASP中实现下拉菜单联动

ASP中实现下拉菜单联动1.asp+jquery实现下拉菜单联动,代码如下：<%@LANGUAGE="VBSCRIPT" CODEPAGE="936"%><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>无标题文档</title><script src="js/jquery-1.7.2.js" type="text/javascript"></script><script language="javascript" type="text/javascript"> $(document).ready(function(){$("#caozuo").click(function(){if($("#caozuo").val()=='暂停办理'){$("#renyuan").hide();}if($("#caozuo").val()=='文稿拟办'){ $("#renyuan").show();$("#submit").show();}if($("#caozuo").val()=='-1'){ $("#renyuan").hide();$("#submit").hide();}})});</script></head><body><table width="618" border="0" cellspacing="0" cellpadding="0"><tr><td height="60"> </td></tr></table><table width="618" border="1" cellspacing="0" cellpadding="0" align="center"><tr bgcolor="#CCCCCC"><td><select id="caozuo"><option value="-1">-请选择-</option><option value="文稿拟办">文稿拟办</option><option value="暂停办理">暂停办理</option></select><select id="renyuan" style="display:none"><option>张三</option><option>李四</option><option>王五</option></select><input type="submit" value="确定" id="submit"style="display:none"/></td></tr></table></body></html>2.asp+javasript实现下拉菜单联动，代码如下：<%@LANGUAGE="VBSCRIPT" CODEPAGE="936"%><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>无标题文档</title><script src="js/jquery-1.7.2.js"></script><script language="javascript" type="text/javascript"> function xuanze(caozuo){if(caozuo.value=='暂停办理'){document.getElementById("renyuan").style.display="none";document.getElementById("queding").style.display="";}if(caozuo.value=='文稿拟办'){document.getElementById("renyuan").style.display="";document.getElementById("queding").style.display="";}if(caozuo.value=='-1'){document.getElementById("renyuan").style.display="none";document.getElementById("queding").style.display="none"}}</script></head><body><table width="618" border="0" cellspacing="0" cellpadding="0" align="center"><tr><td height="100"> </td></tr></table><table width="618" border="1" cellspacing="0" cellpadding="0" align="center"><tr bgcolor="#eeeeee"><td height="25"><select id="caozuo" onchange="xuanze(caozuo)"><option value="-1">-请选择-</option><option value="文稿拟办">文稿拟办</option><option value="暂停办理">暂停办理</option></select><select id="renyuan" style="display:none"><option>张三</option><option>李四</option></select><input type="submit" value="确定" id="queding" style="display:none"/></td></tr> </table></body> </html>。

级联菜单、连库查询(ajax)

//如果异步调用成功 --> XMLHttpRequest对象的status属性值为200 , html文件在本地运行,则xmlHttp.status的返回值为0,故应该加上xmlHttp.status==0
if(xmlHttp.status==200 || xmlHttp.status==0)
function BuildSel(str,sel)
{
//先清空原来的数据.
sel.options.length=0;
//定义一个数组对象
var substr= new Array();
substr = str.split(",");
<fieldset style="padding-left: 10%">
<legend>
区域查询：
</legend>
<label><select name="sheng" id="sheng" >
<option value="河北省">河北省</option>
<%}
%>
</select>县</label>
<label> <select name="xiang" id="xiang" onchange="changexiang(this.value)">
//subarrstr=substr[i].split("|");
sel.options.add(new Option(substr[i],substr[i]));

ASP二级联动菜单

1
北京市
1
1
0
2
合肥市
2
2
1
3
芜湖市
3
3
1
4
安庆市
4
4
1
5 济南市
5
5
2
6 青岛市
6
6
2
以下市名略。
设计思想：前面四项同Province表设计思想，ProvinceID字段将Province表和City表联系起来。
具体做法如下：
1.设计数据库
我们选用Access数据库。首先，新建名为database1.mdb的Access数据库
在database1.mdb数据库中建立两个表分别为province、city。具体字段设计如下：
Province(省)

<select name="City_select">
<%
set rs_City=server.createobject("adodb.recordset")
具体字段：id—自动编号 ProvinceName—省名 ProvinceNo—省名编号 ProvinceOrder—省排序编号
省 id ProvinceName ProvinceNo ProvinceOrder
1 北京市 0 0
2 安徽省 1 1
3 山东省 2 2
sql="select * from City where ProvinceID="&tmpid&" order by CityOrder"

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

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）在页面的<body>标记添加onload事件，实现当页面加载时，执行init()函数的功能。

代码如下所示：
（8）客户端编写完成，接下来编写服务器端程序。

新建名为Ajax.asp的asp 文件，该文件获得客户端请求，从数据库中读取响应信息，返回给客户端。

conn.as p文件为连接数据库area.mdb的连接语句，这里省略此代码的罗列。

Ajax.asp文件
效果如图8-9所示。

图8-9 三级联动效果。

WEB无限级菜单

页数:4
Ajax实现三级联动

页数:3
二级省市级联jQuery简单实现

页数:2
DWR实现省市县三级联动 - DWR - AJAX

页数:9
jquery ajax +php 级联列表

页数:11
jquery_ajax_+php_级联列表

页数:11
ASP Ajax 级联菜单

页数:5
S2SH+JQuery ztree生成三级级联树形列表菜单

页数:4
使用AJAX技术实现网页级联下拉列表

页数:4
两天时间用AJAX写了个无限级的多级联动菜单(ajax+PHP构架)

页数:6