Ajax+XML实现级联下拉菜单的动态加载

前端之家收集整理的这篇文章主要介绍了Ajax+XML实现级联下拉菜单的动态加载前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

整个业务的流程:
客户端发送请求 → 业务层取出数据 → Servlet生成DOM树回应客户端 → 客户端接收XML数据 → 进行下拉菜单的动态加载

业务层用来取出所有的省份,通过省份id取出对应的所有城市,其中的操作省略,直接奔正题(原生操作,不使用框架):

show.html(显示页):

<!DOCTYPE html>
<html>
<head>
<Meta charset="UTF-8">
<title>级联菜单_省份-城市</title>
<script type="text/javascript" src="js/show.js"></script>
</head>
<body>
    <div>
        省份:<select id="area" name="area">
            <option value="0">=== 请选择省份 ===</option>
        </select>
        城市:<select id="areaplus" name="areaplus">
            <option value="0">=== 请选择城市 ===</option>
        </select>
    </div>
</body>
</html>

show.js(js中实现Ajax与XML的交互):

// 页面加载时的事件处理
window.onload = function(){
    area() ;
    document.getElementById("area").addEventListener("change",function(){
        areaplus(this.value) ;
    },false) ;
}

// 定义Ajax操作对象
var xmlHttpRequest ;
// 定义可重用的Ajax操作方法,用来加载相应的数据
function load(urlMsg){
    // 将Ajax操作对象取出
    xmlHttpRequest = new XMLHttpRequest() ;
    console.log("测试Ajax操作对象" + xmlHttpRequest) ;
    // 设置请求并发送
    xmlHttpRequest.open("post",urlMsg) ;
    xmlHttpRequest.send(null) ;
}
// 利用Ajax进行数据的处理,完成页面内容的填充
function getContent(urlMsg,selId,id,title){
    load(urlMsg) ;
    xmlHttpRequest.onreadystatechange = function(){
        // 当服务器端完成请求的处理时
    if (xmlHttpRequest.readyState == 4 || xmlHttpRequest.status == 200){
        // 是城市菜单时要先清空之前的菜单内容
        if (selId == "areaplus"){
            clear() ;
        }
        // 取得对应的XML数据
        var xmlData = xmlHttpRequest.responseXML ;
        // 获取下拉列表框对象
        var select = document.getElementById(selId) ;
        // 取得XML数据中的所有id和title
        var idList = xmlData.getElementsByTagName(id) ;
        var titleList = xmlData.getElementsByTagName(title) ;
        // 创建所有的option并配置到下拉菜单
        for (var i = 0 ; i < idList.length ; i ++){
            var option = document.createElement("option") ;
            option.setAttribute("value",idList[i].firstChild.nodeValue) ;
            option.appendChild(document.createTextNode(titleList[i].firstChild.nodeValue)) ;
            select.appendChild(option) ;
            }
        }
    }
}
// 显示所有的省份到下拉菜单
function area(){
    getContent("AreaServlet","area","aid","title") ;
}
// 通过省份的下拉菜单动态显示所有的城市到下拉菜单
function areaplus(aid){
    if (aid == "0"){ 
        // 如果没有选择省份数据时清空城市下拉列表
        clear() ;
    }else{
        // 进行内容显示的一系列操作,交给getContent()方法
        getContent("AreaplusServlet?aid=" + aid,"areaplus","apid","title") ;
    }
}
// 清空数据
function clear(){
    // 获取城市的下拉菜单对象,用来删除
    var select = document.getElementById("areaplus") ;
    // 由下拉菜单获取所有的option
    var optionList = select.getElementsByTagName("option") ;
    // 取得option的数量,遍历执行删除
    var len = optionList.length ;
    for (var i = 0 ; i < len - 1 ; i ++){
        select.removeChild(optionList[1]) ;
    }
}

AreaServlet(省份处理):

@WebServlet("/AreaServlet")
public class AreaServlet extends HttpServlet {
    protected void doGet(HttpServletRequest request,HttpServletResponse response)
            throws ServletException,IOException {
        this.doPost(request,response);
    }
    protected void doPost(HttpServletRequest request,IOException {
        request.setCharacterEncoding("UTF-8");
        response.setCharacterEncoding("UTF-8");
        response.setContentType("text/xml");
        IAreaService areaService = ServiceFactory.getInstance(AreaServiceImpl.class);
        try {
            // 从数据层取出所有的Area
            List<Area> allArea = areaService.list();
            // 使用DOM4J取出Area内容,并最终生成XML传到前台
            Document document = DocumentHelper.createDocument();
            // 创建根节点
            Element areasEle = document.addElement("areas");
            // 从allArea中取出所有的值对象,设置到每个area节点中
            for (Area areaVO : allArea) {
                // 创建子节点,对子节点的创建一定要放在遍历代码块中,因为节点的数量随着值对象的数量而改变
                Element area = areasEle.addElement("area");
                Element aid = area.addElement("aid");
                Element title = area.addElement("title");
                aid.setText(String.valueOf(areaVO.getAid()));
                title.setText(areaVO.getTitle());
            }
            // XML设置完成后,开始进行一些列操作,将数据向前台输出
            OutputFormat output = OutputFormat.createCompactFormat();
            output.setEncoding("UTF-8");
            // 设置输出位置为客户端(前台
            XMLWriter writer = new XMLWriter(response.getWriter(),output);
            // 进行XML的输出
            writer.write(document);
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
}

AreaplusServlet(城市处理):

@WebServlet("/AreaplusServlet")
public class AreaplusServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request,HttpServletResponse response) throws ServletException,response);
    }
    @Override
    protected void doPost(HttpServletRequest request,IOException {
        request.setCharacterEncoding("UTF-8") ;
        response.setCharacterEncoding("UTF-8");
        response.setContentType("text/xml");
        IAreaplusService areaplusService = ServiceFactory.getInstance(AreaplusServiceImpl.class) ;
        try {
            // 取出所有的城市数据,取之前要先从客户端接收身份编号
            Integer aid = Integer.parseInt(request.getParameter("aid")) ;
            List<Areaplus> allAreaplus = areaplusService.listByArea(aid) ;
            // 使用DOM4J生成DOM树,输出XML数据到客户端(前台
            Document document = DocumentHelper.createDocument() ;
            // 创建根节点
            Element areaplusRoot = document.addElement("areapluss") ;
            // 为所有的areaplus创建子节点,首先要迭代所有的areaplus
            Iterator<Areaplus> iter = allAreaplus.iterator();
            while(iter.hasNext()){
                Areaplus vo = iter.next() ;
                // 开始子节点的创建和配置
                Element areaplus = areaplusRoot.addElement("areaplus") ;
                Element apid = areaplus.addElement("apid") ;
                Element title = areaplus.addElement("title") ;
                // 设置每个节点的内容
                apid.setText(String.valueOf(vo.getApid()));
                title.setText(vo.getTitle());
            }
            // DOM树生成之后,开始进行一系列的操作完成对客户端的数据传输
            OutputFormat output = OutputFormat.createCompactFormat() ;
            output.setEncoding("UTF-8");
            // 获取流对象,通过构造设置输出位置到客户端,并设置传输方式为紧凑方式和UTF-8的编码方式
            XMLWriter writer = new XMLWriter(response.getWriter(),output) ;
            // 进行内容输出
            writer.write(document); 
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
}
原文链接:https://www.f2er.com/ajax/161802.html

猜你在找的Ajax相关文章