Ajax 技术学习（JavaEE）—— 实现二级下拉联动

Ajax 技术练习

一、Ajax 实现下拉菜单
- 1.1 场景再现
- 1.2 技术分析
  - 1.2.1 前台分析
  - 1.2.2 后台分析
二、让我们来实现它
- 2.1 前端界面 jsp
- 2.2 ajax 代码
- 2.2 使用 xml 传输数据（servlet 代码）
三、运行截图

一、Ajax 实现下拉菜单

1.1 场景再现

我们在购买快递选择收获地址的时候，选择地域一般都是现选择省，省选择完毕后，电脑会自动显示该省对应的城市，我们选择了城市之后，系统会显示该城市所对应的的区域。

其实这就是通过 ajax 后台数据自动生成的，接下来我们就来实现一下

我们这里使用 servlet 写死数据

1.2 技术分析

1.2.1 前台分析

我们设置一个监听事件给第一个下拉选择框，当用户选择了一个省份之后，就使用 ajax 进行交互，得到对应的城市的信息。整理一下

监听下拉框的变化事件
下拉框的值发生变化之后，就与服务端进行交互
服务端收到数据，根据用户传过来的省份进行信息匹配，然后把数据返回给用户
数据返回给前端之后，使用 dom 把数据写进城市下拉列表当中

1.2.2 后台分析

后端使用 servlet 把数据写死

后端监听前端发过来的数据
判断数据类型，然后经过处理，数据重新封装，返还给前端

二、让我们来实现它

2.1 前端界面 jsp

代码语言：javascript复制

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ajax 实现下拉联动title>
head>
<body>

<p>省份的选择界面p>
	<select name="province" id="provinceId">
		<option value="-1">请选择省份option>
		<option>湖北省option>
		<option>湖南省option>
	select>
	
	<select name="city" id="cityId">
		<option>请选择城市option>
	select>
	
	<script type="text/javascript">
		
	script>
body>
html>

2.2 ajax 代码

代码语言：javascript复制

		document.getElementById("provinceId").onchange = function() {
			var index = this.selectedIndex; // 获取选项中下标的索引值
			var province = this.options[index].innerHTML;// 获取下拉框的值
			
			// 下拉框的值合格性验证
			if (index != this.options[0]) {
				// 选择城市列表的时候，会自动添加，因此调用时就清除
				var citySelect = document.getElementById("cityId");
				
				// 每次长度都变为 1
				citySelect.options.length = 1;
					
				// 定义请求的地址,我依然使用 post 请求
	            var url = "AjaxServlet_xml?time"   new Date().getTime();

				
	        	//    ajax 代码
	    		var xmlhttp;
				// 根据不停的版本的游览器，使用不同的 ajax 的 api
				if (window.XMLHttpRequest) {
					xmlhttp = new XMLHttpRequest(); 
				} else if (window.ActiveXObject) {
					// IE6 以下版本
					xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
				}
				
				// 绑定事件
				xmlhttp.onreadystatechange = function() { 
			
					if (xmlhttp.readyState == 4) { 

						if(xmlhttp.status == 200) {

							// var text = xmlhttp.responseText;
							var text = xmlhttp.responseXML;
							console.log(text);
							
							// 将返回的 xml 数据进行解析操作,写入城市下拉框中
							var cities = text.getElementsByTagName("city");
							console.log(cities.length);
							
						    //得到每一个cities节点的值，动态生成下拉框，添加到下拉框中
	                        for (var i = 0; i < cities.length; i  ) {
	                            var value = cities[i].firstChild.nodeValue;
	                            //动态生成下拉框
	                            var optionElement = document.createElement("option");
	                            optionElement.innerHTML = value;

	                            //添加到下拉框中
	                            citySelect.appendChild(optionElement);

	                       		}
							}
						}
					}
				
					
					// 创建 http 请求，建立与服务器的连接
					xmlhttp.open("post", url, true); // 这里的 url 由我们从外面传进来，是 AjaxCheck (一个Servlet)
					
					// 我们采用的 post 请求，因此需要加上请求头
					xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
				
					xmlhttp.send("province=" province);
			}
		}

2.2 使用 xml 传输数据（servlet 代码）

我采用 post 的方式传送数据

代码语言：javascript复制

		request.setCharacterEncoding("utf-8");
		response.setCharacterEncoding("utf-8");
		
		String province = request.getParameter("province"); // 得到前台传递过来的省份
		System.out.println(province);
		
		 //这里是返回的是XML，因此指定XML数据！
        response.setContentType("text/xml;charset=UTF-8");
        
        PrintWriter out = response.getWriter();

        /****************返回XML文件给前台**************/
        out.write("");
        out.write("");
        if("湖北省".equals(province)){
            out.write("武汉市");
            out.write("黄冈市");
            out.write("十堰市");
            out.write("襄阳市");
            out.write("孝感市");
            out.write("随州市");
            out.write("神农架");
        }else if("湖南省".equals(province)){
            out.write("长沙");
            out.write("株洲");
            out.write("湘潭");
            out.write("岳阳");
        }
        out.write("");

        System.out.println("后台返回数据中。。。。");
        
        /*******关闭输出流*******/
        out.flush();
        out.close();
	}