Ajax案例-基于XML，以POST方式，完成省份-城市二级下拉联动

<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>基于XML，以POST方式，完成省份-城市二级下拉联动</title>
    <script type="text/javascript" src="js/ajax.js"></script>
  </head>
  <body>
        
    <select id="provinceID" style="width:111px">
        <option>选择省份</option>
        <option>湖南</option>
        <option>广东</option>
    </select>    
    &nbsp;&nbsp;&nbsp;
    <select id="cityID" style="width:111px">
        <option>选择城市</option>
    </select>    
    
    <script type="text/javascript">
        //定位省份下拉框，同时添加内容改变事件
        document.getElementById("provinceID").onchange = function(){
            //清空城市下拉框中的内容，除第一项外
            var cityElement = document.getElementById("cityID");
            cityElement.options.length = 1;
            //获取选中option标签的索引号，从0开始            
            var index = this.selectedIndex;     
            //定位选中的option标签
            var optionElement = this[index];
            //获取选中的option标签中的内容，即省份
            var province = optionElement.innerHTML;
            //如果选中的内容不是"选择省份"
            if("选择省份" != province){
                //NO1)
                var ajax = createAJAX();
                //NO2)
                var method = "POST";
                var url = "${pageContext.request.contextPath}/ProvinceCityServlet?time="+new Date().getTime();
                ajax.open(method,url);
                //设置AJAX请求头
                ajax.setRequestHeader("content-type","application/x-www-form-urlencoded");
                //NO3)
                var content = "province=" + province;
                ajax.send(content);
                
                //---------------------------------等待
                
                //NO4)
                ajax.onreadystatechange = function(){
                    if(ajax.readyState == 4){
                        if(ajax.status == 200){
                            //NO5)从AJAX异步对象中获取服务器响应的xml文档
                            var xmlDocument = ajax.responseXML;
                            
                            //NO6)按照DOM规则，解析XML文档
                                
                            var cityElementArray = xmlDocument.getElementsByTagName("city");    
                            var size = cityElementArray.length;
                            for(var i=0;i<size;i++){
                                //innerHTML只能用在html/jsp中，不能用在xml中
                                var city = cityElementArray[i].firstChild.nodeValue;
                                //<option></option>
                                var optionElement = document.createElement("option");    
                                //<option>广州</option>
                                optionElement.innerHTML = city;
                                //<select><option>广州</option></select>
                                cityElement.appendChild(optionElement);
                            }
                        }
                    }
                }
            }
        }
    </script>
    
  </body>
</html>

package loaderman.provincecity;

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;

/**
 * 基于XML，以POST方式，完成省份-城市二级下拉联动
 * @author AdminTC
 */
public class ProvinceCityServlet extends HttpServlet {
    public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {
        request.setCharacterEncoding("UTF-8");
        String province = request.getParameter("province");

        //通知AJAX异步对象，服务器响应的数据为xml格式的
        response.setContentType("text/xml;charset=UTF-8");
        //获取字符输出流
        PrintWriter pw = response.getWriter();

        pw.write("<?xml version='1.0' encoding='UTF-8'?>");
        pw.write("<root>");


        if("广东".equals(province)){
            pw.write("<city>广州</city>");
            pw.write("<city>深圳</city>");
            pw.write("<city>中山</city>");
        }else if("湖南".equals(province)){
            pw.write("<city>长沙</city>");
            pw.write("<city>株洲</city>");
            pw.write("<city>湘潭</city>");
            pw.write("<city>岳阳</city>");
        }


        pw.write("</root>");
        pw.flush();
        pw.close();
    }
}

Ajax案例-基于XML，以POST方式，完成省份-城市二级下拉联动

猜你喜欢