2023年基于ajax的二級(jí)動(dòng)態(tài)菜單_第1頁(yè)
2023年基于ajax的二級(jí)動(dòng)態(tài)菜單_第2頁(yè)
2023年基于ajax的二級(jí)動(dòng)態(tài)菜單_第3頁(yè)
2023年基于ajax的二級(jí)動(dòng)態(tài)菜單_第4頁(yè)
2023年基于ajax的二級(jí)動(dòng)態(tài)菜單_第5頁(yè)
已閱讀5頁(yè)，還剩16頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡(jiǎn)介

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

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

xmlns=""

xmlns:xsi=""

xsi:schemaLocation="

">

<servlet>

<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>然后，來(lái)看咱們JSP文獻(xiàn)：<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN">

<html>

<head>

<title>MyHtml.html</title>

<meta-equiv="keywords"content="keyword1,keyword2,keyword3">

<meta-equiv="description"content="thisismypage">

<!--<linkrel="stylesheet"type="text/css"href="./styles.css">-->

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

最終咱們來(lái)看看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è)類(lèi)也十分簡(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è)置清除開(kāi)關(guān)，初始值為假for(vari=0；i<selArray.length；i++){//遍歷列表數(shù)組if(selArray[i]==targetId){//當(dāng)遍歷至目旳列表時(shí)，打開(kāi)清除開(kāi)關(guān)canClear=true;}if(canClear){//從目旳列表開(kāi)始到最下級(jí)列表結(jié)束，開(kāi)關(guān)一直保持打開(kāi)clearOptions(document.getElementById(selArray[i]))；//清除該級(jí)列表選項(xiàng)}}}</script></head><!--頁(yè)面加載完畢做兩件事：1.初始化列表數(shù)組2.為第一種列表賦值--><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"%><%!//訪問(wèn)數(shù)據(jù)庫(kù)獲得下級(jí)選項(xiàng)信息StringgetOptions(StringselectedId){intcounter=0；//計(jì)數(shù)器StringBufferopts=newStringBuffer("{")；//保留選項(xiàng)信息Stringsql="select*fromselect_menuwherepid=?orderbyseqasc";//定義查詢(xún)數(shù)據(jù)庫(kù)SQL語(yǔ)句Connectionconn=null；//申明Connection對(duì)象PreparedStatementpstmt=null；//申明PreparedStatement對(duì)象ResultSetrs=null；//申明ResultSet對(duì)象try{conn=DBUtils.getConnection()；//獲取數(shù)據(jù)庫(kù)連接pstmt=conn.prepareStatement(sql)；//根據(jù)sql創(chuàng)立PreparedStatementpstmt.setString(1，selectedId)；//設(shè)置參數(shù)rs=pstmt.executeQuery()；//執(zhí)行查詢(xún)，返回成果集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"%><%!//訪問(wèn)數(shù)據(jù)庫(kù)獲得下級(jí)選項(xiàng)信息StringgetOptions(StringselectedId){intcounter=0；//計(jì)數(shù)器StringBufferopts=newStringBuffer("{")；//保留選項(xiàng)信息Stringsql="select*fromselect_menuwherepid=?orderbyseqasc";//定義查詢(xún)數(shù)據(jù)庫(kù)SQL語(yǔ)句Connectionconn=null；//申明Connection對(duì)象PreparedStatementpstmt=null；//申明PreparedStatement對(duì)象ResultSetrs=null；//申明ResultSet對(duì)象try{conn=DBUtils.getConnection()；//獲取數(shù)據(jù)庫(kù)連接pstmt=conn.prepareStatement(sql)；//根據(jù)sql創(chuàng)立PreparedStatementpstmt.setString(1，sele

溫馨提示

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

最新文檔

評(píng)論

0/150

提交評(píng)論