基於asp+ajax和數據庫驅動的二級聯動菜單,需要的朋友可以參考下。
index.asp頁面代碼
<! - #include file = conn.asp->
<%
設置cmd = conn.execute(選擇bigclassid,bigclassname來自bigclass)
tempid = cmd(bigclassid)
%>
<select name =菜單onChange = getSubCategory(this.value);>
<%
如果不是cmd.eof,則
在不cmd.eof時做
BigClassid = CMD(BigClassid)
BigClassName = CMD(BigClassName)
%>
<option value = <%= bigClassid%>> <%= bigClassName%> </option>
<%
cmd.movenext
環形
如果結束
cmd.close
設置CMD =沒有
%>
</select>
<div id = subclass>
<select name =子菜單>
<%
設置cxd = conn.execute(從bigclassid =&tempid中選擇 * *
如果不是cxd.eof,則
在不cxd.eof時做
SmallClassid = CXD(SmallClassid)
SmallClassName = CXD(SmallClassName)%>
<option value = <%= smallClassid%>> <%= SmallClassName%> </option>
<%
cxd.movenext
環形
cxd.close
設置CXD =沒有
別的
html = <select name ='smallclassid'> <option value ='0 selected>暫無小類</option> </oplect>
wress.write html
如果結束
%>
</select>
</div>
ajax.js代碼
// JavaScript文檔
函數createxmlhttp()
{
xmlhttpobj = false;
嘗試{
xmlhttpobj = new xmlhttprequest;
}捕獲(e){
嘗試{
xmlhttpobj = new ActiveXobject(msxml2.xmlhttp);
} catch(e2){
嘗試{
xmlhttpobj = new ActiveXobject(Microsoft.xmlhttp);
} catch(e3){
xmlhttpobj = false;
}
}
}
返回XMLHTTPOBJ;
}
函數getSubCategory(bigClassid){
如果(bigClassid == 0){
document.getElementById(subclass).innerhtml = <select name ='smallClassId'> <option value ='0 selected>選擇二級分類</option> </option> </select>;
返回;
};
var xmlhttpobj = createxmlhttp();
if(xmlhttpobj){//如果創建對象xmlhttpobj成功
xmlhttpobj.onreadystatechange = handle;
xmlhttpobj.open('get',get ubcategory.asp?bigClassid =+bigClassid+&number =+Math.random(),true); // get方法
xmlhttpobj.send(null);
}
}
函數hander(){//客戶端監控函數
//if(XMLHTTPOBJ.READYSTATE = 4) {///
if(xmlhttpobj.status == 200){
// alert('ok');
var html = xmlhttpobj.responsetext; //獲得返回值
document.getElementById(subclass).innerhtml = html;
}別的{
document.getElementById(子類).innerhtml =對不起,您請求的頁面有問題...;
}
//}
//別的{
//document.getElementById(subclass).innerhtml = xmlhttpobj.dreadystate ;///服務器處理中
//}
//}
}
getSubCategory.asp代碼
<%@語言= vbscript codepage = 936%>
<! - #include file = conn.asp->
<%
響應。charset= gb2312
bigClassid = safe(request.querystring(bigClassid))
如果BigClassid <>
設置RE =新的Regexp
re.ignorecase = true
re.global = false
re.pattern = ^[0-9] {1,3} $
如果不是re.test(bigclassid),則
響應
響應
如果%>結束
<%錯誤簡歷下一步
設置p = conn.execute(從bigClassid =&bigClassid中選擇 * *
如果err,然後
err.CLEAR
響應
響應
如果結束
如果不是p.eof,則
html = <select name ='select2'>&vbnewline
雖然不p.eof
html = html&<option value ='&p(smallclassid)&'>&p(smallclassname)&</option>&vbnewline
P.Movenext
環形
html = html&</select>
別的
html = <select name ='smallclassid'> <option value ='0 selected>暫無小類</option> </oplect>
如果結束
p.close
設置p =沒有
conn.close
設置conn =沒有
wress.write html
html =
如果結束
%>