ajax 请求xml格式数据的省市联动

最新推荐文章于 2021-05-26 06:30:03 发布

阅读量873

点赞数

分类专栏： JavaScript 文章标签： ajax xml

本文链接：https://blog.csdn.net/cckevincyh/article/details/53139878

版权

JavaScript 专栏收录该内容

61 篇文章 0 订阅

订阅专栏

<%@ 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="./xmFile.js"> </script>
    </head>
    <body>
     <select id="province" name="province">
       <option value="">请选择....</option>
     </select>
     <select id="city" name="city">
        <option value="">请选择.....</option>
     </select>
  </body>
</html>

window.onload = function(){
    var xhr = ajaxFunction();

    xhr.onreadystatechange = function(){
        if(xhr.readyState==4){
            if(xhr.status==200){
                var docXml = xhr.responseXML;       //获取xml格式的数据
                //alert(docXml);        //打印的是object类型，说明已经不是字符串

                var provinceXmlElements = docXml.getElementsByTagName("province");

                for(var i=0;i<provinceXmlElements.length;i++){
                    var provinceXmlElement = provinceXmlElements[i];

                    var provinceXmlValue = provinceXmlElement.getAttribute("name");

                    /*
                     * <select id="province" name="province">
                           <option value="">请选择....</option>
                         </select>
                     */
                    var optionElement = document.createElement("option");
                    optionElement.setAttribute("value",provinceXmlValue);
                    var provinceText = document.createTextNode(provinceXmlValue);
                    optionElement.appendChild(provinceText);

                    var provinceElement = document.getElementById("province");
                    provinceElement.appendChild(optionElement);

                }

                //处理页面中第二个下拉选与处理页面中第一个下拉选的内容是没有关系的,所以不能放置在遍历省份里面

                document.getElementById("province").onchange = function(){
                    //1 获取页面中选中的省份
                    var provinceValue = this.value;

                    //清空
                    /*
                     * <select id="city" name="city">
                            <option value="">请选择.....</option>
                         </select>
                     */
                    var cityElement = document.getElementById("city");
                    var optionsOld = cityElement.getElementsByTagName("option");
                    for(var z=1;z<optionsOld.length;){
                        cityElement.removeChild(optionsOld[z]);
                    }

                    //2 遍历解析后的省份
                    for(var i=0;i<provinceXmlElements.length;i++){
                        var provinceXmlElement = provinceXmlElements[i];

                        var provinceXmlValue = provinceXmlElement.getAttribute("name");

                        //3 作对比
                        if(provinceValue==provinceXmlValue){
                            //4 获取对应省份里的所有城市信息
                            var cityXmlElements = provinceXmlElement.getElementsByTagName("city");

                            for(var j=0;j<cityXmlElements.length;j++){
                                var cityXmlElement = cityXmlElements[j];

                                var cityXmlValue = cityXmlElement.firstChild.nodeValue;

                                //5 放置到页面的第二个下拉选中
                                /*
                                 * <select id="city" name="city">
                                        <option value="">请选择.....</option>
                                     </select>
                                 */
                                var optionElement = document.createElement("option");
                                optionElement.setAttribute("value",cityXmlValue);
                                var cityText = document.createTextNode(cityXmlValue);
                                optionElement.appendChild(cityText);

                                cityElement.appendChild(optionElement);

                            }
                        }
                    }
                }
            }
        }
    }

    xhr.open("post","../XmlFileServlet?timeStamp="+new Date().getTime(),true);

    xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");

    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;
 }

package com.cc.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 doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {

        //响应的数据格式是xml格式，设置ContentType成text/xml
        response.setContentType("text/xml;charset=utf-8");
        PrintWriter out = response.getWriter();

        //xml格式的数据，并不是xml文件
        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>");

    }

}

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ajax 请求xml格式数据的省市联动

<%@ 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=
复制链接

扫一扫