使用ajax实现二级联动

思路

1. 在加载页面的时候，后台读取xml文件中的所有省份信息，显示到下拉框中
   a) 页面加载ajax发送异步请求到servlet
   b) servlet解析china.xml然后获取所有的省份的名称
   c) Servlet向jsp响应省份信息
   d) 通过jquery将每一个省份的名字添加到select下

因为在服务端需要进行xml文件的解析, 所以需要导入相应的jar包.

image.png

2.点击省份下拉框的时候触发内容改变

1.获取当前选中的省份信息
2.通过ajax请求serlvet 并且将当前的省份名称传递过去
3.Servlet根据省份名称去解析china.xml文件，获取该省份的xml片段
4.将xml片段相应给jsp
5.解析xml片段 将对应的城市信息添加到select下

image.png

首先, 将保存有中国省市信息的xml文件放到类路径下, china.xml:

    
        东城区
        西城区
        崇文区
        宣武区
        朝阳区
        丰台区
        石景山区
        海淀区
        门头沟区
        房山区
        通州区
        顺义区
        昌平区
        大兴区
        怀柔区
        平谷区
        密云县
        延庆县
    
    
        和平区
        河东区
        河西区
        南开区
        河北区
        红桥区
        塘沽区
        汉沽区
        大港区
        东丽区
        西青区
        津南区
        北辰区
        武清区
        宝坻区
        宁河县
        静海县
        蓟县
    
    // ...

客户端代码: province_city.jsp

<%--
  User: menglanyingfei
  Date: 2018/1/29
  Time: 10:07
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>



    
    
    



    
        --请选择--
    
        
    
        --请选择--
    

createXMLHttp.js: 用来创建XMLHttpRequest对象

// ajax的四个步骤
// 创建XMLHttpRequest对象
function createXmlHttp() {
    var xmlHttp;
    try {
        xmlHttp = new XMLHttpRequest();
    } catch (e) {
        try {
            xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try {
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e) {
                alert("浏览器太老，不能使用ajax");
            }
        }
    }

    return xmlHttp;
}

服务端代码:

@WebServlet(name = "ProvinceCityServlet", value = "/ProvinceCityServlet")
public class ProvinceCityServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        // 请求编码
        request.setCharacterEncoding("utf-8");
        // 响应格式
        response.setContentType("text/xml;charset=utf-8");
        // 获取请求参数
        String proName = request.getParameter("proName");
        // 创建解析器
        SAXReader reader = new SAXReader();

        try {
            // 解析china.xml得到Document对象
            Document doc = reader.read(this.getClass().getResourceAsStream("/china.xml"));
            // 查询name为proName的province片段
            Element proEle = (Element) doc.selectSingleNode("//province[@name='" +proName +"']");
            // 将proEle转换成xml格式的字符串
            String strEle = proEle.asXML();
            // 响应
            response.getWriter().print(strEle);
        } catch (DocumentException e) {
            e.printStackTrace();
        }
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        // 设置响应编码
        response.setContentType("text/html;charset=utf-8");
        // 创建解析器
        SAXReader reader = new SAXReader();
        // 得到xml文件对应的Document对象
        try {
            Document doc = reader.read(this.getClass().getResourceAsStream("/china.xml"));
            // 获取province元素的属性节点(XPath)
            List attrList =
                    doc.selectNodes("//province/@name");
            // 采用StringBuilder来拼接所有的省份名称
            StringBuilder sb = new StringBuilder();

            for (int i = 0; i < attrList.size(); i++) {
                // 获取每一个属性节点的属性值
                String proName = attrList.get(i).getValue();
                sb.append(proName);
                // 北京,天津...台湾
                if (i < attrList.size() - 1) {
                    sb.append("|");
                }

            }
            // 响应
            response.getWriter().print(sb.toString());

        } catch (DocumentException e) {
            e.printStackTrace();
        }


    }
}

成功运行演示:

demo.gif

完整代码地址

https://github.com/menglanyingfei/front-end-Learning/tree/master/ajax%26json/ajax-day02