ajax实现二级联动

最新推荐文章于 2022-01-20 10:15:00 发布

李卫康的博客

最新推荐文章于 2022-01-20 10:15:00 发布

阅读量817

点赞数

分类专栏： JAVA 进阶之路文章标签： ajax

本文链接：https://blog.csdn.net/u014010769/article/details/46859699

版权

JAVA 进阶之路专栏收录该内容

90 篇文章 0 订阅

订阅专栏

手工方式实现二级联动的效果：

jsp页面：

<%@ page language="java"  pageEncoding="utf-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
    <head>
        <title>级联菜单</title>
        <script type="text/javascript" src="xmlfile.js"> </script>
    </head>
    <body>
     <select id="province" name="province">
       <option value="">请选择....</option>
     </select>
     <select id="city" name="city">
        <option value="">请选择.....</option>
     </select>
  </body>
</html>

jsp页面中的js文件…
这里实现二级联动的主要步骤：

window.onload=function(){
    //1.获取对象
    var xhr=ajaxFunction();
    //2.监听
    xhr.onreadystatechange=function(){
        if(xhr.readyState==4){
            if(xhr.status==200){
                var docXml=xhr.responseXML;
                //解析docXml的内容
                var provinceXmlElements=docXml.getElementsByTagName("province");
                //遍历所有的province
                for(var i=0;i<provinceXmlElements.length;i++){
                    var provinceXmlElement=provinceXmlElements[i];
                    var provinceXmlValue=provinceXmlElement.getAttribute("name");
                    //<option value="">请选择....</option>
                    var option=document.createElement("option");
                    option.setAttribute("value",provinceXmlValue);
                    var text=document.createTextNode(provinceXmlValue);
                    option.appendChild(text);//挂接节点

                    var provinceDocElement=document.getElementById("province");
                    provinceDocElement.appendChild(option);
                }
                //当点击一个一个省份时触发一个事件
                document.getElementById("province").onchange=function(){
                        //清空城市列表
                        var cityDocElement = document.getElementById("city");
                        var options = cityDocElement.getElementsByTagName("option");
                        for(var z=options.length-1;z>0;z--){
                        cityElement.removeChild(options[z]);
                    }
                        //1.页面中选中的是哪个省份
                        var privinceDocValue=this.value;
                        //2.解析xml内容中所有province的信息
                        for(var i=0;i<provinceXmlElements.length;i++){
                            var provinceXmlElement=provinceXmlElements[i];
                            var provinceXmlValue=provinceXmlElement.getAttribute("name");
                            if(privinceDocValue==provinceXmlValue){
                                //解析其中的city
                                var cityXmlElements=provinceXmlElement.getElementsByTagName("city");
                                //遍历city
                                for(var j=0;j<cityXmlElements.length;j++){
                                    var cityXmlElement=cityXmlElements[j];
                                    var cityXmlElementValue=cityXmlElement.firstChild.nodeValue;
                                    //<option><option/>
                                    var option= document.createElement("option");
                                    option.setAttribute("value",cityXmlElementValue);
                                    //创建一个文本节点
                                    var text=document.createTextNode(cityXmlElementValue);
                                    option.appendChild(text);

                                    cityDocElement.appendChild(option);
                                }

                            }
                        }
                        //3.遍历所有的province的信息

                }

            }
        }

    }
    //3.建立客户机和服务器的链接
    xhr.open("get","../servlet/XmlFileServlet",true);
    //4.发送数据
    xhr.send(null);
}
function ajaxFunction(){
   var xmlHttp;
   try{ // Firefox, Opera 8.0+, Safari
        xmlHttp=new XMLHttpRequest();
    }
    catch (e){
       try{// Internet Explorer
             xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
          }
        catch (e){
          try{
             xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
          }
          catch (e){}
          }
    }

    return xmlHttp;
 }

servlet打印xml数据
如果服务器端向客户端发送的数据格式是XML格式的话,一定设置响应首部信息:”Content-Type”为”text/xml”

package app.servlet;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class XmlFileServlet extends HttpServlet {

    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        ***response.setContentType("text/xml;charset=utf-8");***
        PrintWriter out = response.getWriter();
        /*
         *  * 如果实际开发的话,查询数据库
         *      * 结果集为JavaBean类型
         *      * 结果集为集合内容:Array、List、Map及Set等集合
         *  
         *  * 现在不查询数据库,模拟查询数据库:手工方式构建XML格式
         */

        //手工方式构建的XML格式,实际上就是String类型的字符串
        out.println("<china>");
        out.println("<province name='吉林省'>");
        out.println("<city>长春</city>");
        out.println("<city>吉林市</city>");
        out.println("<city>四平</city>");
        out.println("<city>松原</city>");
        out.println("<city>通化</city>");
        out.println("</province>");

        out.println("<province name='辽宁省'>");
        out.println("<city>沈阳</city>");
        out.println("<city>大连</city>");
        out.println("<city>鞍山</city>");
        out.println("<city>抚顺</city>");
        out.println("<city>铁岭</city>");
        out.println("</province>");

        out.println("<province name='山东省'>");
        out.println("<city>济南</city>");
        out.println("<city>青岛</city>");
        out.println("<city>威海</city>");
        out.println("<city>烟台</city>");
        out.println("<city>潍坊</city>");
        out.println("</province>");
        out.println("</china>");
    }

    public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        doGet(request, response);
    }

}

4.效果：
这里写图片描述

李卫康的博客

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ajax实现二级联动

手工方式实现二级联动的效果：jsp页面：&lt;%@ page language="java" pageEncoding="utf-8"%&gt;&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"&gt;&lt;html&gt; &lt;head&gt; &
复制链接

扫一扫