<rt id="bn8ez"></rt>
<label id="bn8ez"></label>

  • <span id="bn8ez"></span>

    <label id="bn8ez"><meter id="bn8ez"></meter></label>

    cuiyi's blog(崔毅 crazycy)

    記錄點滴 鑒往事之得失 以資于發展
    數據加載中……

    ajax巨好用,4級級聯菜單的解決

    為解決省、市、區、區域4級級聯菜單,在網上搜索了大量的級聯菜單解決方案,也請教過不少朋友,要么過于復雜,要么過于占內存,未果。

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

    現在把已經可以正常運行的例子的核心代碼分享:
    客戶端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>


    頁面調用處代碼如下:
    <td?align="left"?class="list_content"?width="75%">
    ??? 省
    ???
    <select?id="province_select"?name="province_select"?onchange="refreshList('p');">?
    ????????
    <option?value=""?SELECTED>請選擇</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>請選擇</option>
    ???
    </select>
    ??? 區
    ???
    <select?id="section_select"?name="section_select"?onchange="refreshList('s');">?
    ????????
    <option?value=""?SELECTED>請選擇</option>
    ???
    </select>
    ??? 區域
    ???
    <select?id="appointDomain"?name="appointDomain">?
    ????????
    <option?value=""?SELECTED>請選擇</option>
    ???
    </select>
    </td>


    服務器端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都可行。今天還看到一個朋友在dearbook上問某書的示例為啥不用Servlet而用JSP,

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

    我的觀點:
    jsp的調用和out打印與servlet本質上是一致的;如果采用servlet從理論上更說得過去,但是對于示例未必最佳,畢竟jsp只要放在web容器的某個應用下就ok;如果是servlet則需要配置;對于一本講述概要而不是深入討論最佳實踐的書,我覺得作者的不足是沒有提到其它可行方案或者解釋為啥通過這個方式來示例;對于讀者來說,應該產生這個疑問,并且該弄明白為啥這么干

    聲明:
    本例子在firefox下完全正常運行;
    在IE下運行到紅色標記處得到的對象的個數居然是0;嚴重疑惑中,希望得到朋友們的指點.....

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

    評論

    # re: ajax巨好用,4級級聯菜單的解決  回復  更多評論   

    使用DWR實現這個功能會更加方便,但是代碼會簡潔很多。
    2006-07-22 22:06 | Faith.Yan

    # re: ajax巨好用,4級級聯菜單的解決  回復  更多評論   

    DWR?呵呵;好的,再學習一下
    2006-07-23 13:20 | crazycy

    # re: ajax巨好用,4級級聯菜單的解決  回復  更多評論   

    檢查一下生成的xml有沒有問題,我看了兩遍,沒發現有什么問題,還有就是編碼問題,如果服務器端出現編碼問題會無法生成xml的。
    2006-07-23 19:08 | TiGERTiAN

    # re: ajax巨好用,4級級聯菜單的解決  回復  更多評論   

    @TiGERTiAN
    多謝TiGERTiAN

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

    而且在Firefox瀏覽器中是沒有問題的....


    2006-07-23 20:11 | crazycy

    # re: ajax巨好用,4級級聯菜單的解決  回復  更多評論   

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

    # re: ajax巨好用,4級級聯菜單的解決  回復  更多評論   

    @TiGERTiAN


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

    # re: ajax巨好用,4級級聯菜單的解決  回復  更多評論   

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

    # re: ajax巨好用,4級級聯菜單的解決  回復  更多評論   

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

    # re: ajax巨好用,4級級聯菜單的解決  回復  更多評論   

    想問一下,IE中對象個數為0的問題解決沒有,有的話麻煩說一下解決辦法~
    另外想認識一下交個朋友
    qq:154242387
    Email:xz0312-221@163.com
    2007-03-19 14:43 | SINO

    # re: ajax巨好用,4級級聯菜單的解決  回復  更多評論   

    @SINO
    哈哈,好的,我已經加您了。

    至于IE對象個數為0的問題,我并沒有處理好,慚愧?。灰黄鹎写枨写?
    2007-03-20 23:14 | crazycy

    # re: ajax巨好用,4級級聯菜單的解決  回復  更多評論   

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

    # re: ajax巨好用,4級級聯菜單的解決  回復  更多評論   

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

    # re: ajax巨好用,4級級聯菜單的解決[未登錄]  回復  更多評論   

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

    # re: ajax巨好用,4級級聯菜單的解決  回復  更多評論   

    感謝分享。
    2012-02-20 11:19 | tms
    主站蜘蛛池模板: 精品国产日韩亚洲一区| 亚洲精品美女久久久久99| 老司机福利在线免费观看| 国产91精品一区二区麻豆亚洲| 97在线免费观看视频| 亚洲国产成人精品电影| 又粗又大又硬又爽的免费视频| 搡女人免费免费视频观看| 亚洲国产精品白丝在线观看| 免费在线不卡视频| 日本免费大黄在线观看| 国产91成人精品亚洲精品| 日木av无码专区亚洲av毛片| 国产真实伦在线视频免费观看| 日韩精品免费视频| 色婷婷精品免费视频| 激情内射亚洲一区二区三区| 国产一区二区三区免费在线观看| 男的把j放进女人下面视频免费| 中文字幕乱码亚洲精品一区| 亚洲国产另类久久久精品| 在线视频免费国产成人| 最近中文字幕mv免费高清在线| 日亚毛片免费乱码不卡一区 | 亚洲va久久久噜噜噜久久狠狠 | 一级毛片免费全部播放| 亚洲三级在线播放| 久久久亚洲精品无码| 亚洲国产精品碰碰| 女人张开腿等男人桶免费视频| 未满十八18禁止免费无码网站| 青青青视频免费观看| 亚洲日本VA午夜在线电影| 亚洲视频手机在线| 国产亚洲AV无码AV男人的天堂| 国产一级淫片视频免费看| 国产免费不卡v片在线观看| 少妇太爽了在线观看免费视频| 国产JIZZ中国JIZZ免费看| 在线亚洲v日韩v| 国产精品高清视亚洲一区二区|