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

Gorit

发布于 2021-12-09 13:50:22

2.1K0

发布于 2021-12-09 13:50:22

文章被收录于专栏：Gorit 带你学全栈系列

Ajax 技术练习

一、Ajax 实现下拉菜单

1.1 场景再现

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

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

我们这里使用 servlet 写死数据

1.2 技术分析

1.2.1 前台分析

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

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

1.2.2 后台分析

后端使用 servlet 把数据写死

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

二、让我们来实现它

2.1 前端界面 jsp

<%@ 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 代码

		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 的方式传送数据

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