基于asp+ajax和数据库驱动的二级联动菜单

  index.asp 页面代码

  

复制代码 代码如下:

  <!--#include file="conn.asp" -->

  <%

  set cmd = conn.execute("select bigclassid,bigclassname from bigclass")

  tempid=cmd("bigclassid")

  %>

  <select name="menu" onChange="getsubcategory(this.value);">

  <%

  if not cmd.eof then

  do while not cmd.eof

  bigclassid= cmd("bigclassid")

  bigclassname = cmd("bigclassname")

  %>

  <option value="<%=bigclassid%>"><%=bigclassname%></option>

  <%

  cmd.movenext

  loop

  end if

  cmd.close

  set cmd = nothing

  %>

  </select>

  <div id="subclass">

  <select name="submenu">

  <%

  set cxd = conn.execute("select * from smallclass where bigclassid=" & tempid)

  if not cxd.eof then

  do while not cxd.eof

  smallclassid= cxd("smallclassid")

  smallclassname = cxd("smallclassname")%>

  <option value="<%=smallclassid%>"><%=smallclassname%></option>

  <%

  cxd.movenext

  loop

  cxd.close

  set cxd = nothing

  else

  html = "<select name='smallclassid'><option value='0' selected>暂无小类</option></select>"

  response.write html

  end if

  %>

  </select>

  </div>

  ajax.js 代码

  

复制代码 代码如下:

  // JavaScript Document

  function createxmlhttp()

  {

  xmlhttpobj = false;

  try{

  xmlhttpobj = new XMLHttpRequest;

  }catch(e){

  try{

  xmlhttpobj=new ActiveXObject("MSXML2.XMLHTTP");

  }catch(e2){

  try{

  xmlhttpobj=new ActiveXObject("Microsoft.XMLHTTP");

  }catch(e3){

  xmlhttpobj = false;

  }

  }

  }

  return xmlhttpobj;

  }

  function getsubcategory(bigclassid){

  if(bigclassid==0){

  document.getElementById("subclass").innerHTML="<select name='smallclassid'><option value='0' selected>选择二级分类</option></select>";

  return;

  };

  var xmlhttpobj = createxmlhttp();

  if(xmlhttpobj){//如果创建对象xmlhttpobj成功

  xmlhttpobj.onreadystatechange=handle;

  xmlhttpobj.open('get',"getsubcategory.asp?bigclassid="+bigclassid+"&number="+Math.random(),true);//get方法 加个随机数。

  xmlhttpobj.send(null);

  }

  }

  function handle(){//客户端监控函数

  //if(xmlhttpobj.readystate==4){//服务器处理请求完成

  if(xmlhttpobj.status==200){

  //alert('ok');

  var html = xmlhttpobj.responseText;//获得返回值

  document.getElementById("subclass").innerHTML=html;

  }else{

  document.getElementById("subclass").innerHTML="对不起,您请求的页面有问题...";

  }

  //}

  //else{

  //document.getElementById("subclass").innerHTML=xmlhttpobj.readystate;//服务器处理中

  //}

  //}

  }

  getsubcategory.asp 代码

  

复制代码 代码如下:

  <%@language="vbscript" codepage="936"%>

  <!--#include file="conn.asp"-->

  <%

  response.charset="gb2312"

  bigclassid=safe(request.querystring("bigclassid"))

  if bigclassid<>"" then

  set re=new regexp

  re.ignorecase=true

  re.global=false

  re.pattern = "^[0-9]{1,3}$"

  if not re.test(bigclassid) then

  response.write "非法参数"

  response.end

  end if%>

  <%on error resume next

  set p = conn.execute("select * from smallclass where bigclassid=" & bigclassid)

  if err then

  err.clear

  response.write "查询出错"

  response.end

  end if

  if not p.eof then

  html = "<select name='select2'>"&vbnewline

  do while not p.eof

  html = html&"<option value='"&p("smallclassid")&"'>"&p("smallclassname")&"</option>"&vbnewline

  p.movenext

  loop

  html = html&"</select>"

  else

  html = "<select name='smallclassid'><option value='0' selected>暂无小类</option></select>"

  end if

  p.close

  set p = nothing

  conn.close

  set conn = nothing

  response.write html

  html = ""

  end if

  %>