cuiyi's blog(崔毅 crazycy)

          記錄點(diǎn)滴 鑒往事之得失 以資于發(fā)展
          數(shù)據(jù)加載中……

          ajax巨好用,4級(jí)級(jí)聯(lián)菜單的解決

          為解決省、市、區(qū)、區(qū)域4級(jí)級(jí)聯(lián)菜單,在網(wǎng)上搜索了大量的級(jí)聯(lián)菜單解決方案,也請(qǐng)教過(guò)不少朋友,要么過(guò)于復(fù)雜,要么過(guò)于占內(nèi)存,未果。

          在建議下,悉心讀《ajax基礎(chǔ)教程》4余遍,方有與ajax相識(shí)恨晚之感,唯一的感慨就是好用好用絕對(duì)好用。

          現(xiàn)在把已經(jīng)可以正常運(yùn)行的例子的核心代碼分享:
          客戶端ajax代碼如下:
          <script?type="text/javascript">
          ????????var?xmlHttp;
          ????????var?domainId;
          ????????var?type;
          ????????
          ????????function?refreshList(typesource)?{
          ????????????createXMLHttpRequest();
          ????????????type?
          =?typesource;
          ????????????
          if?("p"?==?type)?{
          ????????????????getSelectedId(
          "province_select");
          ????????????}?
          else?if("c"?==?type)?{
          ????????????????getSelectedId(
          "city_select");
          ????????????}?
          else?if("s"?==?type)?{
          ????????????????getSelectedId(
          "section_select");
          ????????????}?
          ????????????var?url?
          =?"enterpriseManage2.html?method=retrieve&ts="?+?new?Date().getTime();
          ????????????var?queryStr?
          =?"domainId="?+?domainId;
          ????????????alert(queryStr);
          ????????????xmlHttp.onreadystatechange
          =handleStateChange;
          ????????????xmlHttp.open(
          "POST",?url);
          ????????????xmlHttp.setRequestHeader(
          "Content-Type","application/x-www-form-urlencoded;");
          ????????????xmlHttp.send(queryStr);
          ????????}
          ????????
          ????????function?handleStateChange()?{
          ????????????
          if?(xmlHttp.readyState?==?4)?{
          ????????????????
          if?(xmlHttp.status?==?200)?{
          ????????????????????updateList();
          ????????????????}
          ????????????}
          ?????????}
          ?????????
          ?????????function?getSelectedId(elementId)?{
          ?????????????alert(
          "elementId:?"?+?elementId);
          ?????????????
          //var?selectedId?=?null;
          ?????????????var?options?=?document.getElementById(elementId).childNodes;
          ?????????????var?option?
          =?null;
          ?????????????
          for?(var?i?=?0,?n?=?options.length;?i?<?n;?i++)?{
          ?????????????????option?
          =?options[i];
          ?????????????????
          if?(option.selected)?{
          ?????????????????????domainId?
          =?option.value;
          ?????????????????????
          //return?selectedId;
          ?????????????????}
          ?????????????}
          ?????????}
          ?????????
          ?????????function?updateList()?{
          ?????????????alert(
          "type:?"?+?type);
          ?????????????
          if?("p"?==?type)?{
          ?????????????????var?select?
          =?document.getElementById("city_select");
          ?????????????????var?options?
          =?xmlHttp.responseXML.getElementsByTagName("domain");
          ?????????????????for?(var?i?=?0,?n?=?options.length;?i?<?n;?i++)?{
          ?????????????????????select.appendChild(createElementWithValue(options[i]));
          ?????????????????}
          ?????????????}?
          else?if("c"?==?type)?{
          ?????????????????var?select?
          =?document.getElementById("section_select");
          ?????????????????var?options?
          =?xmlHttp.responseXML.getElementsByTagName("domain");
          ?????????????????for?(var?i?=?0,?n?=?options.length;?i?<?n;?i++)?{
          ?????????????????????select.appendChild(createElementWithValue(options[i]));
          ?????????????????}????
          ?????????????}?
          else?if("s"?==?type)?{
          ?????????????????var?select?
          =?document.getElementById("appointDomain");
          ?????????????????var?options?
          =?xmlHttp.responseXML.getElementsByTagName("domain");
          ?????????????????
          for?(var?i?=?0,?n?=?options.length;?i?<?n;?i++)?{
          ?????????????????????select.appendChild(createElementWithValue(options[i]));
          ?????????????????}????
          ?????????????}
          ?????????}

          ?????????
          ?????????function?createElementWithValue(text)?{
          ?????????????var?element?
          =?document.createElement("option");
          ?????????????element.setAttribute(
          "value",?text.getAttribute("id"));
          ?????????????var?text?
          =?document.createTextNode(text.firstChild.nodeValue);
          ?????????????element.appendChild(text);
          ?????????????
          return?element;
          ?????????}
          ????????
          ????????function?createXMLHttpRequest()?{
          ????????????
          if(window.XMLHttpRequest)?{
          ????????????????????xmlHttp?=?new?XMLHttpRequest();
          ????????????????}?
          else?if?(window.ActiveXObject)?{
          ????????????????????try?{
          ????????????????????????xmlHttp?
          =?new?ActiveXObject("Msxml2.XMLHTTP");
          ????????????????????}?
          catch?(e)?{
          ????????????????????????
          try?{
          ????????????????????????????xmlHttp?
          =?new?ActiveXObject("Microsoft.XMLHTTP");
          ????????????????????????}?
          catch?(e)?{
          ????????????????????????}
          ????????????????????}
          ????????????????}
          ????????}

          ????
          </script>


          頁(yè)面調(diào)用處代碼如下:
          <td?align="left"?class="list_content"?width="75%">
          ??? 省
          ???
          <select?id="province_select"?name="province_select"?onchange="refreshList('p');">?
          ????????
          <option?value=""?SELECTED>請(qǐng)選擇</option>
          ????????????
          <%
          ??????????????? java.util.Iterator?it?
          =?((java.util.List)request.getAttribute("province_options")).iterator();
          ???????????????
          while?(it.hasNext())?{
          ??????????????????? Province?province?
          =?(Province)it.next();
          ?????????????
          %>
          ?????????????
          <option?value=<%=province.getId()%>><%=province.getName()%></option>
          ?????????????
          <%
          ???????????????? }
          ?????????????
          %>
          ???
          </select>
          ??? 市
          ???
          <select?id="city_select"?name="city_select"?onchange="refreshList('c');">??????
          ???????? <option?value=""?SELECTED>請(qǐng)選擇</option>
          ???
          </select>
          ??? 區(qū)
          ???
          <select?id="section_select"?name="section_select"?onchange="refreshList('s');">?
          ????????
          <option?value=""?SELECTED>請(qǐng)選擇</option>
          ???
          </select>
          ??? 區(qū)域
          ???
          <select?id="appointDomain"?name="appointDomain">?
          ????????
          <option?value=""?SELECTED>請(qǐng)選擇</option>
          ???
          </select>
          </td>


          服務(wù)器端action(Struts)代碼如下:
          ?1?public?ActionForward?retrieve(ActionMapping?mapping,?ActionForm?actionForm,
          ?2?????????????HttpServletRequest?request,?HttpServletResponse?response)?{
          ?3?????????String?domainId?=?request.getParameter("domainId");
          ?4?????????DomainFactory?factory?=?DomainFactory.getInstance();
          ?5?????????Object?domain?=?factory.getDomain(domainId);
          ?6?????????StringBuffer?responseXML?=?new?StringBuffer("<domains>");
          ?7?????????if(domain?instanceof?Province)?{
          ?8?????????????Province?province?=?(Province)domain;
          ?9?????????????Iterator?it?=?province.getCities().iterator();
          10?????????????while?(it.hasNext())?{
          11?????????????????City?city?=?(City)it.next();
          12?????????????????responseXML.append("<domain");
          13?????????????????responseXML.append("?id='"?+?city.getId());
          14?????????????????responseXML.append("'>");
          15?????????????????responseXML.append(city.getName());
          16?????????????????responseXML.append("</domain>");
          17?????????????}
          18?????????}?else?if(domain?instanceof?City)?{
          19?????????????City?city?=?(City)domain;
          20?????????????Iterator?it?=?city.getSections().iterator();
          21?????????????while?(it.hasNext())?{
          22?????????????????Section?section?=?(Section)it.next();
          23?????????????????responseXML.append("<domain");
          24?????????????????responseXML.append("?id='"?+?section.getId());
          25?????????????????responseXML.append("'>");
          26?????????????????responseXML.append(section.getName());
          27?????????????????responseXML.append("</domain>");
          28?????????????}
          29?????????}?else?if?(domain?instanceof?Section)?{
          30?????????????Section?section?=?(Section)domain;
          31?????????????Iterator?it?=?section.getRegions().iterator();
          32?????????????while?(it.hasNext())?{
          33?????????????????Region?region?=?(Region)it.next();
          34?????????????????responseXML.append("<domain");
          35?????????????????responseXML.append("?id='"?+?region.getId());
          36?????????????????responseXML.append("'>");
          37?????????????????responseXML.append(region.getName());
          38?????????????????responseXML.append("</domain>");
          39?????????????}
          40?????????}?
          41?????????responseXML.append("</domains>");
          42?????????response.setContentType("text/xml");
          43?????????try?{
          44?????????????PrintWriter?out?=?(PrintWriter)response.getWriter();
          45?????????????out.write(responseXML.toString());
          46?????????????System.out.println(responseXML.toString());
          47?????????????//out.flush();
          48?????????}?catch?(IOException?e)?{
          49?????????????//do?nothing
          50?????????????e.printStackTrace();
          51?????????}
          52?????????return?null;
          53?????}


          附注:這里用jsp或者servlet都可行。今天還看到一個(gè)朋友在dearbook上問(wèn)某書的示例為啥不用Servlet而用JSP,

          問(wèn)題如下:讀第*章,發(fā)現(xiàn)XMLHttpRequest.open(method,url,true)中的url請(qǐng)求的都是jsp,然后由jsp再調(diào)用處理方法,然后再out.print().不能直接發(fā)送請(qǐng)求到servlet讓servlet處理再out.print()?疑惑...?

          我的觀點(diǎn):
          jsp的調(diào)用和out打印與servlet本質(zhì)上是一致的;如果采用servlet從理論上更說(shuō)得過(guò)去,但是對(duì)于示例未必最佳,畢竟jsp只要放在web容器的某個(gè)應(yīng)用下就ok;如果是servlet則需要配置;對(duì)于一本講述概要而不是深入討論最佳實(shí)踐的書,我覺(jué)得作者的不足是沒(méi)有提到其它可行方案或者解釋為啥通過(guò)這個(gè)方式來(lái)示例;對(duì)于讀者來(lái)說(shuō),應(yīng)該產(chǎn)生這個(gè)疑問(wèn),并且該弄明白為啥這么干

          聲明:
          本例子在firefox下完全正常運(yùn)行;
          在IE下運(yùn)行到紅色標(biāo)記處得到的對(duì)象的個(gè)數(shù)居然是0;嚴(yán)重疑惑中,希望得到朋友們的指點(diǎn).....

          posted on 2006-07-22 21:32 crazycy 閱讀(7410) 評(píng)論(14)  編輯  收藏 所屬分類: JavaEE技術(shù)

          評(píng)論

          # re: ajax巨好用,4級(jí)級(jí)聯(lián)菜單的解決  回復(fù)  更多評(píng)論   

          使用DWR實(shí)現(xiàn)這個(gè)功能會(huì)更加方便,但是代碼會(huì)簡(jiǎn)潔很多。
          2006-07-22 22:06 | Faith.Yan

          # re: ajax巨好用,4級(jí)級(jí)聯(lián)菜單的解決  回復(fù)  更多評(píng)論   

          DWR?呵呵;好的,再學(xué)習(xí)一下
          2006-07-23 13:20 | crazycy

          # re: ajax巨好用,4級(jí)級(jí)聯(lián)菜單的解決  回復(fù)  更多評(píng)論   

          檢查一下生成的xml有沒(méi)有問(wèn)題,我看了兩遍,沒(méi)發(fā)現(xiàn)有什么問(wèn)題,還有就是編碼問(wèn)題,如果服務(wù)器端出現(xiàn)編碼問(wèn)題會(huì)無(wú)法生成xml的。
          2006-07-23 19:08 | TiGERTiAN

          # re: ajax巨好用,4級(jí)級(jí)聯(lián)菜單的解決  回復(fù)  更多評(píng)論   

          @TiGERTiAN
          多謝TiGERTiAN

          服務(wù)端返回了正確的XML格式 我打印檢查過(guò)了
          <domains><domain id='1_beijing'>北京</domain></domains>

          而且在Firefox瀏覽器中是沒(méi)有問(wèn)題的....


          2006-07-23 20:11 | crazycy

          # re: ajax巨好用,4級(jí)級(jí)聯(lián)菜單的解決  回復(fù)  更多評(píng)論   

          你可以把你的源程序發(fā)給我嗎?我來(lái)看看
          tigertian@gmail.com
          2006-07-23 20:20 | TiGERTiAN

          # re: ajax巨好用,4級(jí)級(jí)聯(lián)菜單的解決  回復(fù)  更多評(píng)論   

          @TiGERTiAN


          have send, thanks a lot
          2006-07-24 14:07 | crazycy

          # re: ajax巨好用,4級(jí)級(jí)聯(lián)菜單的解決  回復(fù)  更多評(píng)論   

          @Faith.Yan
          @TiGERTiAN
          @crazycy
          jd
          2006-10-09 19:29 | 小魚

          # re: ajax巨好用,4級(jí)級(jí)聯(lián)菜單的解決  回復(fù)  更多評(píng)論   

          我是一個(gè)初學(xué)者,可以把源文件發(fā)給我嗎?
          謝謝
          Email:endisoft@gmail.com
          2006-10-14 11:23 | Endisoft

          # re: ajax巨好用,4級(jí)級(jí)聯(lián)菜單的解決  回復(fù)  更多評(píng)論   

          想問(wèn)一下,IE中對(duì)象個(gè)數(shù)為0的問(wèn)題解決沒(méi)有,有的話麻煩說(shuō)一下解決辦法~
          另外想認(rèn)識(shí)一下交個(gè)朋友
          qq:154242387
          Email:xz0312-221@163.com
          2007-03-19 14:43 | SINO

          # re: ajax巨好用,4級(jí)級(jí)聯(lián)菜單的解決  回復(fù)  更多評(píng)論   

          @SINO
          哈哈,好的,我已經(jīng)加您了。

          至于IE對(duì)象個(gè)數(shù)為0的問(wèn)題,我并沒(méi)有處理好,慚愧啊;一起切磋切磋
          2007-03-20 23:14 | crazycy

          # re: ajax巨好用,4級(jí)級(jí)聯(lián)菜單的解決  回復(fù)  更多評(píng)論   

          為0的情況你
          servletResponse.setContentType("text/xml;charset=UTF-8");
          看看
          2007-04-19 11:49 | zhh1981

          # re: ajax巨好用,4級(jí)級(jí)聯(lián)菜單的解決  回復(fù)  更多評(píng)論   

          給代碼不加注釋是犯罪行為i
          2007-08-29 10:17 | 可ing

          # re: ajax巨好用,4級(jí)級(jí)聯(lián)菜單的解決[未登錄](méi)  回復(fù)  更多評(píng)論   

          是不是具體的省縣市的列表還沒(méi)有呢?
          2008-02-19 16:34 | rock

          # re: ajax巨好用,4級(jí)級(jí)聯(lián)菜單的解決  回復(fù)  更多評(píng)論   

          感謝分享。
          2012-02-20 11:19 | tms
          主站蜘蛛池模板: 临朐县| 百色市| 博客| 崇阳县| 临朐县| 鸡泽县| 恩平市| 大余县| 宜宾市| 土默特右旗| 台南县| 龙井市| 微山县| 西平县| 喜德县| 蒙山县| 建始县| 开阳县| 双流县| 贺州市| 修水县| 宣城市| 新晃| 宜州市| 马鞍山市| 察哈| 台山市| 微博| 三门峡市| 神池县| 泉州市| 台东市| 武义县| 红原县| 鹿泉市| 当阳市| 浦北县| 美姑县| 马山县| 辰溪县| 通河县|