2023年基于ajax的二級(jí)動(dòng)態(tài)菜單

上傳人：1*** IP屬地：江西上傳時(shí)間：2023-05-17 格式：DOC 頁數(shù)：21 大小：69.04KB 積分：92 舉報(bào) 版權(quán)申訴

已閱讀5頁，還剩16頁未讀，繼續(xù)免費(fèi)閱讀

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

這些時(shí)間，瞎子也看得見，AJAX正大踏步朝咱們走來。不管咱們是擁護(hù)也好，反對(duì)也罷，還是視而不見，AJAX像一陣時(shí)尚，席轉(zhuǎn)了咱們所有人。有關(guān)AJAX定義也好，大話也好，早有人在網(wǎng)上刊登了汗牛充棟文字，在這里我也不想照本宣科。只想說說我感覺到某些長(zhǎng)處，對(duì)于不對(duì)，人們也可以和我討論：首先是異步交互，顧客感覺不到頁面提交，當(dāng)然也不等待頁面返回。這是使用了AJAX技術(shù)頁面給顧客第一感覺。另首先是響應(yīng)速度快，這也是顧客強(qiáng)烈體驗(yàn)。然后是與咱們開發(fā)者有關(guān)，復(fù)雜UI成功處理，一直以來，咱們對(duì)B/S模式UI不如C/S模式UI豐富而苦惱。目前由于AJAX大量使用JS，使得復(fù)雜UI設(shè)計(jì)變得愈加成功。最終，AJAX祈求返回對(duì)象為XML文獻(xiàn)，這也是一種時(shí)尚，就是WEBSERVICE時(shí)尚同樣。易于和WEBSERVICE結(jié)合起來。好了，閑話少說，讓咱們轉(zhuǎn)入正題吧。咱們第一種例子是基于Servlet為后臺(tái)一種web應(yīng)用。基于ServletAJAX

這是一種很常用UI，當(dāng)顧客在第一種選用框里選用ZHEJIANG時(shí)，第二個(gè)選用框要出現(xiàn)ZHEJIANG都市；當(dāng)顧客在第一種選用框里選用JIANGSU時(shí)，第二個(gè)選用框里要出現(xiàn)JIANGSU都市。首先，咱們來看配置文獻(xiàn)web.xml，在里面配置一種servlet，跟往常同樣：<web-appversion="2.4"

xmlns=""

xmlns:xsi=""

xsi:schemaLocation="

<servlet-name>SelectCityServlet</servlet-name>

<servlet-class>com.stephen.servlet.SelectCityServlet</servlet-class>

</servlet>

<servlet-mapping>

<servlet-name>SelectCityServlet</servlet-name>

<url-pattern>/servlet/SelectCityServlet</url-pattern>

</servlet-mapping>

</web-app>然后，來看咱們JSP文獻(xiàn)：<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN">

<html>

<head>

<title>MyHtml.html</title>

</head>

<scripttype="text/javascript">

functiongetResult(stateVal){

varurl="servlet/SelectCityServlet?state="+stateVal；

if(window.XMLRequest){

req=newXMLRequest()；

}elseif(window.ActiveXObject){

req=newActiveXObject("Microsoft.XML")；

}

if(req){

req.open("GET",url，true)；

req.onreadystatechange=complete；

req.send(null)；

}

functioncomplete(){

if(req.readyState==4){

if(req.status==200){

varcity=req.responseXML.getElementsByTagName("city")；

file://alert(city.length);

varstr=newArray();

for(vari=0;i<city.length;i++){

str[i]=city[i].firstChild.data;

}

file://alert(document.getElementById("city"));

buildSelect(str,document.getElementById("city"));

}

functionbuildSelect(str,sel){

sel.options.length=0;

for(vari=0;i<str.length;i++){

sel.options[sel.options.length]=newOption(str[i],str[i])

}

</script>

<body>

<selectname="state"onChange="getResult(this.value)">

<optionvalue="">Select</option>>

<optionvalue="zj">ZEHJIANG</option>>

<optionvalue="zs">JIANGSU</option>>

</select>

<selectid="city">

<optionvalue="">CITY</option>

</select>

</body>

</html>第一眼看來，跟咱們尋常JSP沒有兩樣。仔細(xì)一看，不一樣在JS里頭。咱們首先來看第一種措施：getResult(stateVal)，在這個(gè)措施里，首先是獲得XmlRequest；然后設(shè)置該祈求url：req.open("GET",url，true);接著設(shè)置祈求返回值接受措施：req.onreadystatechange=complete;該返回值接受措施為——complete();最終是發(fā)送祈求：req.send(null);然后咱們來看咱們返回值接受措施：complete()，這這個(gè)措施里，首先判斷與否對(duì)旳返回，假如對(duì)旳返回，用DOM對(duì)返回XML文獻(xiàn)進(jìn)行解析。有關(guān)DOM使用，這里不再講述，請(qǐng)人們參閱有關(guān)文檔。得到city值后來，再通過buildSelect(str,sel)措施賦值到對(duì)應(yīng)選用框里頭去。

最終咱們來看看Servlet文獻(xiàn)：importjava.io.IOException;

importjava.io.PrintWriter;

importjavax.servlet.ServletException;

importjavax.servlet..Servlet;

importjavax.servlet..ServletRequest;

importjavax.servlet..ServletResponse;

/**

*@authorAdministrator

*TODOTochangethetemplateforthisgeneratedtypecommentgoto

*Window-Preferences-Java-CodeStyle-CodeTemplates

publicclassSelectCityServletextendsServlet{

publicSelectCityServlet(){

super();

}

publicvoiddestroy(){

super.destroy()；

}

publicvoiddoGet(ServletRequestrequest，ServletResponseresponse)

throwsServletException，IOException{

response.setContentType("text/xml");

response.setHeader("Cache-Control"，"no-cache");

Stringstate=request.getParameter("state");

StringBuffersb=newStringBuffer("<state>");

if("zj".equals(state)){

sb.append("<city>hangzhou</city><city>huzhou</city>");

}elseif("zs".equals(state)){

sb.append("<city>nanjing</city><city>yangzhou</city><city>suzhou</city>");

}

sb.append("</state>");

PrintWriterout=response.getWriter();

out.write(sb.toString());

out.close();

}

}這個(gè)類也十分簡(jiǎn)樸，首先是從request里獲得state參數(shù)，然后根據(jù)state參數(shù)生成對(duì)應(yīng)XML文獻(xiàn)，最終將XML文獻(xiàn)輸出到PrintWriter對(duì)象里。到目前為止，第一種例子代碼已經(jīng)所有結(jié)束。是不是比較簡(jiǎn)樸？運(yùn)行圖：/<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN"><html><head><meta-equiv="Content-type"content="text/html；charset=utf-8"><title>多級(jí)聯(lián)動(dòng)菜單</title><scripttype="text/javascript">varxml；//用于保留XMLRequest對(duì)象全局變量vartargetSelId；//用于保留要更新選項(xiàng)列表idvarselArray；//用于保留級(jí)聯(lián)菜單id數(shù)組//用于創(chuàng)立XMLRequest對(duì)象functioncreateXml(){//根據(jù)window.XMLRequest對(duì)象與否存在使用不一樣創(chuàng)立方式if(window.XMLRequest){xml=newXMLRequest()；//FireFox、Opera等瀏覽器支持創(chuàng)立方式}else{xml=newActiveXObject("Microsoft.XML");//IE瀏覽器支持創(chuàng)立方式}}//獲取列表選項(xiàng)調(diào)用函數(shù)functionbuildSelect(selectedId，targetId){if(selectedId==""){//selectedId為空串體現(xiàn)選中了默認(rèn)項(xiàng)clearSubSel(targetId)；//清除目旳列表及下級(jí)列表中選項(xiàng)return；//直接結(jié)束函數(shù)調(diào)用，不必向服務(wù)器祈求信息}targetSelId=targetId；//將傳入目旳列表id賦值給targetSelId變量createXml()；//創(chuàng)立XmlRequest對(duì)象xml.onreadystatechange=buildSelectCallBack；//設(shè)置回調(diào)函數(shù)xml.open("GET"，"select_menu.jsp?selectedId="+selectedId，true);xml.send(null);}//獲取列表選項(xiàng)回調(diào)函數(shù)functionbuildSelectCallBack(){if(xml.readyState==4){varoptionsInfo=eval("("+xml.responseText+")")；//將從服務(wù)器獲得文本轉(zhuǎn)為對(duì)象直接量vartargetSelNode=document.getElementById(targetSelId);clearSubSel(targetSelId)；//清除目旳列表中選項(xiàng)//遍歷對(duì)象直接量中組員for(varoinoptionsInfo){targetSelNode.appendChild(createOption(o，optionsInfo[o]))；//在目旳列表追加新選項(xiàng)}}}//根據(jù)傳入value和text創(chuàng)立選項(xiàng)functioncreateOption(value，text){varopt=document.createElement("option")；//創(chuàng)立一種option節(jié)點(diǎn)opt.setAttribute("value"，value)；//設(shè)置valueopt.appendChild(document.createTextNode(text))；//給節(jié)點(diǎn)加入文本信息returnopt;}//清除傳入列表節(jié)點(diǎn)內(nèi)所有選項(xiàng)functionclearOptions(selNode){selNode.length=1；//設(shè)置列表長(zhǎng)度為1，僅保留默認(rèn)選項(xiàng)selNode.options[0].selected=true；//選中默認(rèn)選項(xiàng)}//初始化列表數(shù)組（按級(jí)別）functioninitSelArray(){selArray=arguments；//arguments對(duì)象包括了傳入所有參數(shù)}//清除下級(jí)子列表選項(xiàng)functionclearSubSel(targetId){varcanClear=false；//設(shè)置清除開關(guān)，初始值為假for(vari=0；i<selArray.length；i++){//遍歷列表數(shù)組if(selArray[i]==targetId){//當(dāng)遍歷至目旳列表時(shí)，打開清除開關(guān)canClear=true;}if(canClear){//從目旳列表開始到最下級(jí)列表結(jié)束，開關(guān)一直保持打開clearOptions(document.getElementById(selArray[i]))；//清除該級(jí)列表選項(xiàng)}}}</script></head><bodyonload="initSelArray('selA','selB','selC');buildSelect('INIT'，'selA')"><h1>多級(jí)聯(lián)動(dòng)菜單</h1><table><tr><td>列表A</td><td><selectname="selA"id="selA"onchange="buildSelect(this.value，'selB')"><optionvalue=""selected>請(qǐng)選用</option></select></td></tr><tr><td>列表B</td><td><selectname="selB"id="selB"onchange="buildSelect(this.value，'selC')"><optionvalue=""selected>請(qǐng)選用</option></select></td></tr><tr><td>列表C</td><td><selectname="selC"id="selC"><optionvalue=""selected>請(qǐng)選用</option></select></td></tr></table></body></html><%@pagecontentType="text/plain；charset=UTF-8"%><%@pagelanguage="java"%><%@pageimport="java.sql.*,ajax.db.DBUtils"%><%!//訪問數(shù)據(jù)庫獲得下級(jí)選項(xiàng)信息StringgetOptions(StringselectedId){intcounter=0；//計(jì)數(shù)器StringBufferopts=newStringBuffer("{")；//保留選項(xiàng)信息Stringsql="select*fromselect_menuwherepid=?orderbyseqasc";//定義查詢數(shù)據(jù)庫SQL語句Connectionconn=null；//申明Connection對(duì)象PreparedStatementpstmt=null；//申明PreparedStatement對(duì)象ResultSetrs=null；//申明ResultSet對(duì)象try{conn=DBUtils.getConnection()；//獲取數(shù)據(jù)庫連接pstmt=conn.prepareStatement(sql)；//根據(jù)sql創(chuàng)立PreparedStatementpstmt.setString(1，selectedId)；//設(shè)置參數(shù)rs=pstmt.executeQuery()；//執(zhí)行查詢，返回成果集while(rs.next()){//遍歷成果集//假如不是第一項(xiàng)，追加一種“,”用于分隔選項(xiàng)if(counter>0){opts.append(",");}opts.append("'");opts.append(rs.getString("id"));opts.append("':'");opts.append(rs.getString("text"));opts.append("'");counter++；//計(jì)數(shù)器加1}}catch(SQLExceptione){System.out.println(e.toString());}finally{DBUtils.close(rs)；//關(guān)閉成果集DBUtils.close(pstmt)；//關(guān)閉PreparedStatementDBUtils.close(conn)；//關(guān)閉連接}opts.append("}");returnopts.toString();}%><%out.clear()；//清空目前輸出內(nèi)容（空格和換行符）StringselectedId=request.getParameter("selectedId")；//獲取selectedId參數(shù)StringoptionsInfo=getOptions(selectedId)；//調(diào)用getOptions措施獲得下級(jí)選項(xiàng)信息out.print(optionsInfo)；//輸出下級(jí)選項(xiàng)信息%><%@pagecontentType="text/plain；charset=UTF-8"%><%@pagelanguage="java"%><%@pageimport="java.sql.*,ajax.db.DBUtils"%><%!//訪問數(shù)據(jù)庫獲得下級(jí)選項(xiàng)信息StringgetOptions(StringselectedId){intcounter=0；//計(jì)數(shù)器StringBufferopts=newStringBuffer("{")；//保留選項(xiàng)信息Stringsql="select*fromselect_menuwherepid=?orderbyseqasc";//定義查詢數(shù)據(jù)庫SQL語句Connectionconn=null；//申明Connection對(duì)象PreparedStatementpstmt=null；//申明PreparedStatement對(duì)象ResultSetrs=null；//申明ResultSet對(duì)象try{conn=DBUtils.getConnection()；//獲取數(shù)據(jù)庫連接pstmt=conn.prepareStatement(sql)；//根據(jù)sql創(chuàng)立PreparedStatementpstmt.setString(1，sele

人人文庫> 全部分類> 應(yīng)用文書 > 工作計(jì)劃

溫馨提示

1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
5. 人人文庫網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

2023年基于ajax的二級(jí)動(dòng)態(tài)菜單

文檔簡(jiǎn)介

溫馨提示

最新文檔

評(píng)論

2023年基于ajax的二級(jí)動(dòng)態(tài)菜單

文檔簡(jiǎn)介

溫馨提示

最新文檔

評(píng)論

相關(guān)文檔